Question

在以下代码段中，我希望<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行。 span的行和input的行

Answer 1

我假设您要保留span元素inline行为，但inline ¹元素不会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

^{1。 Inline Elements}

注意：正如您可能知道的那样，inline-block会在元素之间保留空格，要摆脱它，要么在父元素上调用font-size: 0;，要么考虑floating元素到left，您不必再使用size属性，请考虑使用CSS将width分配给元素。

另外，请确保将CSS标准化以实现跨浏览器的一致性。

Answer 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>

Answer 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
}

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

不知何故，我觉得很惭愧，试图帮助你而不先看看你曾经尝试过的东西。

Answer 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

使跨度和输入大小相同

4 个答案: