如何让input输入框和img并列一行

码上中国博客发布于 2016/08/10 19:43

阅读 7K+

HTMLArea

jQuery

有一个div,div内包含一个inpu输入框和一个img,img的宽高一定，如何让input的长度随着div大小变化而变，始终保持和img在同一行。

<div class="form-group code_div">
    <input type="text" name="code" placeholder="验证码" maxlength="4"
	class="form-password form-control"  id="code"><img class="pull-right"
		src="<%=path%>/loginCode/code.do" src="验证码" onclick="this.src='<%=path%>/loginCode/code.do?'+Math.random()"/>
</div>

我自己弄得随着浏览器大小变化，img就错下去一行了，怎么回事

加载中

hyjiacan

2016/08/10 20:10

我不知道是为啥，但是我测试了下，把图片放前面，input放后面是好使的

<html>

	<head>
		<title></title>
		<style type="text/css">
			.container {
				width: 40%;
				margin: 60px auto;
				border: 1px solid red;
				position: relative;
				padding: 10px;
				box-sizing: border-box;
			}
			
			.container .input {
				display: block;
				margin-right: 60px;
				border: 1px solid blue;
			}
			
			.container .img {
				display: block;
				float: right;
				width: 56px;
				height: 20px;
				border: 1px solid green;
			}
			
			.input input {
				width: 100%;
			}
			
			.img img {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="img">
				<img src="" />
			</div>
			<div class="input">
				<input type="text" />
			</div>
		</div>
	</body>

</html>

评论 (0) 引用此答案举报