如何让跨度和输入彼此相邻并共同占据包含div的宽度的100％？

我有下面的代码片段：如何让跨度和输入彼此相邻并共同占据包含div的宽度的100％？

<html> 
<body> 
<div style="width: 700px;"> 
<span>test</span> 
<input style="width: 100%;"></input> 
</div> 
</body> 
</html>

但这并不做我想做的。我希望跨度和输入一起占据div的100％，即输入将从跨度结束处开始并填充直到div的宽度，而不破坏下一行。我怎么做？

来源

2011-06-29 Thiago

在一般情况下，这是如果你想要两个物品都有流体宽度，就不能用CSS来完成。另外，请考虑：如果一个或两个元素（一起）的内容不适合700px，会发生什么？ – Jon

如果您需要正确的流体宽度：

参见：http://jsfiddle.net/kxEML/

CSS：

.inputContainer { 
    width: 300px; 
    border: 1px dashed #f0f 
} 
.inputContainer label { 
    float: left; 
    margin-right: 5px; 
    background: #ccc 
} 
.inputContainer div { 
    overflow: hidden; 
} 
.inputContainer input { 
    width: 100%; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    display: block 
}

HTML：

<div class="inputContainer"> 
    <label>test</label> 
    <div><input /></div> 
</div>

来源

2011-06-29 20:53:12 thirtydot

目前为止最好的解答 – amosrivera

当然，这是行不通的。你输入所有的700px。

<div style="width: 700px;"> 
<span style="width:20%">test</span> 
<input style="width: 80%;"></input> 
</div>

这应该会更好。

来源

2011-06-29 20:44:43

使用width:100%代替input将使其成为700px。添加所需的文本宽度，使行最大，结果input转到下一行。所以你可以把width的input更改为95%以适应这条线。

演示：http://jsfiddle.net/q75C8/

的备选解决方案，使用jQuery可以是以下各项：

$("input").width(($("div").width()-10)-$("span").width());

演示：http://jsfiddle.net/q75C8/2/

P.S删除</input>，不是必需的。

来源

2011-06-29 20:44:45 Sotiris

只需设置它们，使它们的宽度总计在100％左右，并且它们彼此相邻即为float。在你的片段中，input占据了div的100％，所以跨度必须超过它。为了让他们能够在同一条线上进行创作，他们必须具有小于100％或700px的总长度以适合div。设置float属性会告诉浏览器尽可能使它们尽可能齐平，并且因为它们可以适合，所以它们在同一行上最终彼此相邻。：d

<html> 
<body> 
<div style="width: 700px;"> 
<span style="width: 49%; float: left; background-color: blue;">test</span> 
<input style="width: 49%; float: left; background-color: green;"></input> 
</div> 
</body> 
</html>

来源

2011-06-29 20:46:47

尝试是这样的：

<html> 
<head> 
<style type="text/css"> 

    div { width: 700px; } 

    label { display: block; text-align: right; } 

    label > input { width: 50%; } 

</style> 
</head> 
<body> 

<div> 

<label for="user-name">User Name: <input name="user" id="user-name" /></label> 

</div> 

</body> 
</html>

使用标签，而不是SPAN使其成为盲人工作的顺利开展。

在LABEL上设置“display：block”会将其展开至其容器宽度的100％（DIV），并自行启动。

在INPUT上设置“宽度：50％”会使其占用LABEL宽度的一半。

“text-align：right”使标签的文本与INPUT的开头位置齐平。

编辑：哦，并注意LABEL的FOR属性指的是INPUT的ID，而不是它的名称。编辑的例子来澄清这一点。

来源

2011-06-29 20:47:20

<html> 
<style type="text/css"> 

.left { 
    float:left; 
    width:15%; 
    margin:0px auto; 
    padding:0px; 
} 

.right { 
    float:right; 
    width:85%; 
    margin:0px auto; 
    padding:0px; 
} 

.clearthis { 
    width:100%; 
    margin:0px auto; 
    padding:0px; 
    clear:both; 
} 

</style> 
<body> 
<div style="width: 700px;"> 
    <div class="left"> 
     <span>test</span> 
    </div> 
    <div class="right"> 
     <input style="width: 100%;"></input> 
    </div> 
    <div class="clearthis"></div> 
</div> 
</body> 
</html>

这样的事情应该工作

来源

2011-06-29 20:52:11

我得到了它使用表：

<html> 
<body> 
<div style="width: 700px;"> 
    <table border="0" style="width: 100%;"> 
    <tr> 
    <td><span>test</span></td> 
    <td style="width: 100%;"><input style="width: 100%;"></input></td> 
    </tr> 
    </table> 
</div> 
</body> 
</html>

来源

2011-06-29 21:06:54 Thiago

哦，拜托，没有。我们之前看过这部电影，而且结局很糟糕。我将你的注意力引向：http://www.hotdesign.com/seybold/everything.html –

我知道，但你必须做你已做的事情:-)但有一个更好的答案。 – Thiago

以股利和CSS另一种方法是使用表：

<table> 
<tr> 
<td><span>Username</span></td> 
<td><input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username"> 
</td> 
</tr> 
<tr> 
<td><span>Password</span></td> 
<td><input id="password" name="password" value="" type="password" placeholder="Password"> 
</td> 
</tr> 
<tr> 
<td colspan="2"> 
<button type="submit">Login</button> 
</td> 
</tr> 
</table>

来源

2013-12-18 03:45:35 shamsieh76

这将工作，但应该避免，如果你想要一个响应式布局。 – Amicable

如何让跨度和输入彼此相邻并共同占据包含div的宽度的100％？

回答

相关问题