2

次のスニペットでは、 Same for 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行でなければならないことを明確にしませんでした。s の行とs のspan行input

4

4 に答える 4

1

入力の 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

スパンのままにしたい場合は、次のようなものを使用できます。

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

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

jsフィドル

ただし、レイアウトはテーブル レイアウトに非常に近いものです。<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>

jsフィドル

于 2013-11-06T18:17:41.403 に答える
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 に答える