3

私はこのフィドルのような同様の HTML 構造を持っています: http://jsfiddle.net/hAMmK/3/

HTML 構造:

<span class="all">
     <span class="group-1">
         <span class="a">A</span>
         <span class="b"><input type="text" placeholder="b" /></span>
     </スパン>
     <span class="group-2">
         <span class="c">C</span>
         <span class="d">D</span>
     </span> </span>

CSSの現在の結果は

最初の結果

しかし、私の望ましい結果は

望ましい結果

この結果はレスポンシブである必要があります。つまり、入力テキストの幅は、デバイス/ブラウザーの現在の正しい幅で最大にする必要があります。さらに、最も一般的なブラウザー (デスクトップやモバイル/タブレットなど) との互換性が必要です。

これを解決する最善の方法は何ですか?

4

4 に答える 4

3

CSS3 Calcを使用します。Running Demo

input[type="text"]{        
    width: calc(100% - 100px);
}

ただし、 （まだ）どこでもサポートされているわけではなく、減算する幅を知る必要があります。

于 2013-09-19T09:55:52.033 に答える
2

ボタンが静的である場合、つまり、左右のスパンの幅/数がわかっている場合は、フロートを使用できます。より滑らかな応答感が得られますが、あまり良くない負のマージンが使用されます。

CSSを次のように変更しました。

.group-1 {
    width: 20px;
    float: left;
    margin-top: 6px;
}
.group-2 {
    margin-left: 30px;
    margin-right: 70px;
}
.group-3 {
    width: 60px;
    float: right;
    margin-top: -20px;
}

見てください： http://jsfiddle.net/hAMmK/16/

私が言ったように、左/右の幅を修正できる場合にのみ機能しますが、クリーンな応答感を与えるようです.

于 2013-09-19T10:05:39.747 に答える
1

パーセンテージを使用するように幅を変更します。

.a {
     padding: 3px 7px;
    background-color: LightBlue;
    border: 2px solid CornflowerBlue;
    border-radius: 5px;
    color: SteelBlue;
    width: 10%;
}
.c {
    padding: 3px 7px;
    background-color: Moccasin;
    border: 2px solid BurlyWood;
    border-radius: 5px;
    color: DarkKhaki;
    width: 10%;
}
.d {
    padding: 3px 7px;
    background-color: LightSalmon;
    border: 2px solid Brown;
    border-radius: 5px;
    color: IndianRed;
    width: 10%;
}
input{
    width: 70%;
}

JS フィドル: http://jsfiddle.net/hAMmK/4/

于 2013-09-19T09:47:56.547 に答える
1

他のブラウザーをサポートする必要がある場合の css3 スタイルの calc の代替手段として、別の解決策があります。

A がラベルで、C と D がボタンの場合 (私が推測するように)、入力フィールドで幅 100% を使用して左にフロートさせることができます。次に、ブロックの親を表示する必要があります (その場合のようにスパンの場合)。 ) そして、ボタンよりも sime サイズの右マージンを追加します。コンテンツがフローティングされ、ボタンが入力フィールドの右側に表示されるため、マージンが折りたたまれます。

ラベルのサイズがわかっている場合は、ラベルに対して同じことを行うか、テーブルを使用してラベルのテキストを変更できるようにすることができます (おそらく国際化のため)。

あなたの例に適用されていることがわかります：

http://jsfiddle.net/cTd2e/

/*Styles for position here*/
.all{
    line-height: 22px;
}
table {
    width: 100%;
    float: left;
}
.second-cell input{
    width: 100%;
    float: left;
}
.b {
    display: block;
    margin-right: 130px;
}
td.first-cell {
    white-space: nowrap;
}
td.second-cell {
    width: 100%;
}
.group-2{
    vertical-align: middle;
    margin-left: 10px;
}

また、ボタンにテキストが含まれている場合は、テーブル内のテーブルを使用して、入力フィールドを 100% にし、残りを自動にすることができます。

それを行うためのより現代的な互換性のある方法があるかどうかはわかりませんが、それは素晴らしいことです!

于 2013-09-19T13:40:16.193 に答える