0

編集: 明確にするために、4 つの要素すべてを 1 行に配置し、100% 適合させたいと考えています。% を変更できることはわかっていますが、div の端と同じ高さに合わせたいと思います

ラベルと入力フィールドを 1 行に収まるようにし、必要に応じてサイズを変更する % ベースにしようとしています。

問題は、それらをすべて1行に収めることができないことです-どこかのパディングまたはマージンと関係があると思いますが、それを理解できません。

ここで JSfiddle を作成しましたhttp://jsfiddle.net/ZxRAu/

そして、ここに関連するCSSがあります

.generalcontainer {
    width:65%;
    margin:5%;
    height:600px;
    float:left;
    background-color: #CCCCCC;
    border: 0px;
}
.generalcontainer > span {
    font-family: Calibri;
    font-size: 14px;
    padding: 4px;
    margin: 0px;

.generalcontainer > span.label {
    color: #000000;
    font-weight: normal;
    display: inline-block;
    width:25%;
}
.smallentryfield {
    color: #000000;
    font-weight: bold;
    width: 25%;
    padding: 4px;
    margin: 0px;
}
select.smallentryfield {
   box-sizing: content-box;
 }
4

3 に答える 3

0

再び開始し、データ内のコンテナーに Walmiks ガイダンスを使用しました。また、% ベースのパディングを設定して、完璧にします。

IE

form {
    width:98%;
    line-height:24px;
    padding: 1% 1% 0 1%;
}

以下のJSfiddleをチェックしてください

http://jsfiddle.net/FYdhz/

于 2013-10-19T09:45:30.260 に答える
0

25% が期待どおりに機能しない理由は多数あります。理由の 1 つは、幅がパーセンタイルで設定されている要素があり、パディングがピクセル単位である場合です。もう 1 つの理由は、境界、マージン、およびパディングのために適用された幅を入力要素が無視している可能性があります。これらすべてを 0 に設定できますが、表示を inline-block coz に設定すると、要素の後に目に見えないマージンが表示されるように、要素の下部にスペースが追加されるため、いくつかの課題に直面します。もちろん、vertical-align を top に設定し、font-size または line-height を組み合わせて使用​​する場合を除きます。

考えられる解決策は、フォーム要素ごとにコンテナー要素を用意し、コンテナーの幅を 25% に設定し、display: block と float: left を一緒に設定することです。次に、内部要素の幅を 100% に設定し、パディングとマージンを削除できます。

例えば：

<div class="container">
    <label>First name</label>
</div>
<div class="container">
    <select>
        <option selected="selected" value="Mr">Mr</option>
        <option value="Mrs">Mrs</option>
    </select> 
</div>
<div class="container">
    <span>First name</span>
</div>
<div class="container">
    <input type="text"></input>
</div>

例として「コンテナ」と呼んでいます。いくらでも変えられます。次のようなコンテナの CSS を設定できます。

div.container {
    color: #000000;
    font-weight: normal;
    display: block;  /*you need this only if you use a span (as per your example)*/
    width:25%;
    float: left;
    padding: 0px;
    margin: 0px;
}

最後に、内部要素の CSS については、次のようにすることができます。

div.container input[type=text], div.container select {
    width: 100%;
    padding: 0px;
    margin: 0px;
    border: 0px;
}

これは、この問題を解決するためにどの方向に進むことができるかについての単なる提案です。ここで、特定のシナリオでこの概念を試してみるには、jsfiddle を使用してください: http://jsfiddle.net/f8dUC/3/

それが役立つことを願っています!

于 2013-10-19T04:24:19.680 に答える
0

<br>そこにタグが必要だったと思います。例を見てください：

http://jsfiddle.net/afzaal_ahmad_zeeshan/ZxRAu/1/

または、これが必要な場合：

http://jsfiddle.net/afzaal_ahmad_zeeshan/ZxRAu/2/

を減らすだけwidthです20%。そしてそれは動作します:)

マージンとパディングがあり、それが問題を引き起こしていました。これにより、4 つの要素の 25% が 100% になり、残りのマージンが残ります。このように列が崩れて2列になりました。

したがって、20％を追加すると問題が解決しました。フィドルで見ることができます。

于 2013-10-19T03:34:05.373 に答える