1

これは単純な問題のようです-私は次のhtmlを持っています

    <div class="question" id="someQuestionId">
    <input type="text" disabled="disabled" class="creation"/>
</div>

および次のCSS-

.creation{
    height:75%;
}
.creation,textarea{
    background-color:#F2FBEF;
}
.question{
    width:150px;
    height:100px;
    background-color:#0B3B24;


}

ただし、入力ボックスの幅は、入力ボックスが含まれているdivの幅よりも狭くなっています。なぜそれが発生するのでしょうか。幅は受け継がれるべきだと思いましたか？

4

3 に答える 3

4

inputはインライン要素です（実際にはインラインブロック）。親から幅を継承しませんが、代わりにブラウザ固有のデフォルトの幅があります。

CSSを変更します。

.creation{
    height:75%;
    /* Either: */
    width: 100%;
    /* or */
    display: block;
}
于 2012-11-21T22:16:59.173 に答える
0

これはおそらく、ブラウザが特定のDOM要素に与える独自のデフォルトスタイル（幅、パディング、マージンなど）を持っているためです。これらのデフォルトのブラウザスタイルをすべて削除する場合は、CSSリセットを使用する必要があります。input要素に必要なCSSを具体的に指定することもできます。

于 2012-11-21T22:18:41.780 に答える
0

入力またはフォーム要素は、その親の幅を継承しません。

親と同じ幅にするには、親と一致するように幅、パディング、境界線を指定するだけです。

http://jsfiddle.net/24xd8/

<div>
 <input type="text" />
</div>​

div {
 width:150px;
 height:130px;
 padding-top:20px;
 background:#999;
}
input {
 width:138px;
 border:1px solid #000;
 padding:5px;
}
于 2012-11-21T23:08:30.870 に答える