2

在下面的代码片段中，我希望具有 与 second和 second<span>1</span>相同的宽度。等等。<input type="text" size="1" value="1" />spaninput

<!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 行和sinput行

4

4 回答 4

3

我假设你想保留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;
}

演示

1.内联元素

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

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

于 2013-11-06T18:11:12.063 回答
1

在输入上删除一个的大小并添加一个类。（以防万一你不知道，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>
于 2013-11-06T18:13:44.000 回答
0

JsFiddled 在这里：

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
}

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

不知何故，在没有先看到你尝试过的东西的情况下试图帮助你，我感到很惭愧。

于 2013-11-06T18:08:54.827 回答
0

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

#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

于 2013-11-06T18:17:41.403 回答