在下面的片段中,我希望<span>1</span>具有与<input type="text" size="1" value="1" />相同的宽度
对于secondspan和secondinput,相同。等等。

<!DOCTYPE HTML>
<body>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
<div>
    <input type="text" size="1" value="1" />
    <input type="text" size="1" value="2" />
    <input type="text" size="1" value="3" />
</div>
</body>
</html>

我如何用css来完成这个任务?
对不起,我没有说清楚,一定是两排。spans行和inputs行

最佳答案

我假设您希望保留span元素inline的行为,但是inline1元素不接受width,因此将display: inline-block;分配给您的span元素

div span {
    display: inline-block;
    width: 25px;
    text-align: center;
    border: 1px solid #f00;
}

div input[type=text] {
    width: 25px;
}

Demo
一。Inline Elements
注意:如您所知,inline-block保留元素之间的空白,若要清除该空白,请对父元素调用font-size: 0;,或考虑将元素floating赋给left,并且您不必再使用size属性,请考虑改用CSS将width赋给元素。
还要确保规范化CSS以实现跨浏览器一致性。

关于css - 使跨度和输入大小相等,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19819464/

10-12 13:08
查看更多