使跨度和输入大小相等答案

【问题标题】：Make span and input equally sized使跨度和输入大小相等
【发布时间】：2013-11-06 18:06:12
【问题描述】：

在下面的 sn-p 中，我希望 <span>1</span> 具有与 <input type="text" size="1" value="1" /> 相同的宽度第二个span 和第二个input 相同。以此类推。

<!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 做到这一点？

UPD：抱歉，我没有说清楚，它必须是 2 行。 spans 行和inputs 行

【问题讨论】：

喜欢这个？ jsfiddle.net/Hy2HC
给你的元素宽度并让它们显示为块？你试过什么？

标签： css input html

【解决方案1】：

我假设您想保留 span 元素 inline 行为，但 inline¹ 元素不采用 width，因此将 display: inline-block; 分配给您的 @987654328 @元素

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

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

Demo

^{1. Inline Elements}

注意：您可能知道，inline-block 在元素之间保留空白，要摆脱这种情况，请在父元素上调用font-size: 0;，或将floating 考虑将您的元素添加到left，并且您不必再使用size 属性，请考虑使用CSS 将width 分配给元素。

还要确保标准化 CSS 以实现跨浏览器的一致性。

【讨论】：

非常感谢。这正是我所需要的。

【解决方案2】：

在输入上删除一个的大小并添加一个类。（以防万一你不知道，1 em = the current font-size）

<!DOCTYPE HTML>
<style>
    .one {
        width: 1em;
    }
    .two {
        width: 1em;
    }
    .three {
        width: 1em;
    }
</style>
<body>
<div>
    <span class="one">1</span>    
    <span class="two">2</span>    
    <span class="three">3</span>    
</div>
<div>
    <input type="text" class="one" value="1" />
    <input type="text" class="two" value="2" />
    <input type="text" class="three" value="3" />
</div>
</body>
</html>

【讨论】：

【解决方案3】：

JsFiddled here：

span, input {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:222px;
    height: 33px;
    padding:0;
    margin:0;
    display:block;
    float:left
}

但是，通过在边框布局中强制输入，您将不得不处理其他一些情况......

不知何故，我为在没有先看到您尝试过的东西的情况下帮助您而感到羞耻。

【讨论】：

【解决方案4】：

如果你想保持你的跨度，你可以使用这样的东西：

#wrapper
{
    height: auto;
    width: 500px;
}

span, input
{
    width: 30%;
    display: inline-block;
}

jsFiddle

但是，您的布局非常接近表格布局。那么为什么不使用<table> 元素：

<table>
    <tr>
        <td>
            <label>1</label>
        </td>
        <td>
            <label>2</label>
        </td>
        <td>
            <label>3</label>
        </td>
    </tr>
    <tr>
        <td>
           <input type="text" size="1" value="1" /> 
        </td>
         <td>
           <input type="text" size="1" value="2" /> 
        </td>
         <td>
           <input type="text" size="1" value="3" /> 
        </td>        
    </tr>       
</table>

jsFiddle

【讨论】：