0

2つのdivが並んでいます。

最初の div には、2 つのラベルが並んでいて、その下に 1 つの入力テキストがあります。ラベルの 1 つはエラー情報です。表示される場合と表示されない場合があります。表示されていないときは、divのサイズを小さくして、2番目のdivをそれに近づけることができるようにします。

2 つ目も同じですが、ラベル div が 1 つあるため、サイズ変更は必要ありません。

私が望むものを達成する方法はありますか？以下に、私がacahieveしたいことの素晴らしく描かれた例があります:

幅の自動サイズ調整の驚くほど描かれた例

これがコードです。

<div id="main-div">
<div id="address-number-div">
    <label>Number</label>
    <label class="error" id="number-error">Empty Field</label>
    <input id="number-input" onfocus="onfocus('number-error')"/>
</div> 

<div id="address-complement-div">
    <label>Complement</label>
    <input id="complement-input" />
</div>

</p>

およびCSS:

div {border: 1px solid #000000; padding: 5px;}

.error{color:#FF0000; margin-left:5px;}

#main-div div {display:inline-block;}

#main-div input {display:block;}

#number-input {
    width: 16%;
}​
4

3 に答える 3

2

display: inline-block;コンテンツに合わせて縮小するには、 に設定します。

于 2012-09-13T13:40:55.663 に答える
2

このDEMOをご覧ください。

div を左にフローティングすると、この問題が解決するはずです。

于 2012-09-13T13:50:06.483 に答える
1

width <persentage>型の値を与えないでください<length>:

#number-input { width: 24px; }​

私のフィドルのコードでそれを見てください。

于 2012-09-13T15:42:28.353 に答える