3

浮動要素の配置に関していくつかの問題があります。内部にいくつかの要素を持つテーブルセルを作成しようとしています。テキスト入力とドロップダウンのように、ユーザーがブラウザー ウィンドウのサイズを変更するときは、テキスト入力のみをサイズ変更する必要があります。ここで、私はそれを行う方法：

<table style="width: 100%;">
    <tr style="vertical-align: bottom;">
        <td style="white-space: nowrap; width: 20%;">
            <div><span style="float: right; display: block;">
                <select style="display:show;width:60px">
                    <option selected="" value="1">1</option>
                    <option value="2">2</option>
                </select>
                </span> <span style="display: block; overflow: hidden; padding-right: 2px;">
                <input type="text" value="100.0" style="width:100%; text-align:right"/>
            </span></div>
        </td>
    </tr>
</table>

ただし、浮動要素は非浮動要素より少し上に表示されます。 ここに画像の説明を入力

また、リンク、入力テキスト フィールド、ドロップダウンまたは別のリンクがある場合にも、入力フィールドのみがサイズ変更可能な要素である必要があります。

ここにコードがあります

<table style="width: 100%;">
    <tr style="vertical-align: bottom;">
        <td style="white-space:nowrap; width: 30%;">
          <span style="display: block; float: left; padding-top: 3px;">
            <a href="return false;"><img width="14" height="14" src=""/>
            </a>&nbsp;
          </span>
          <span style="float: right; display: block; padding-top: 5px;">
        <a href="return false;">&nbsp;?</a>
          </span>
          <span style="display: block; overflow: hidden; padding-right: 2px;">
        <input value=""style="width: 100%;">
          </span>
         </td>
    </tr>
</table>

この場合、非浮動要素が他の要素よりも上にあるということです:

ここに画像の説明を入力

基本的に、最初のサンプルで浮動要素を垂直方向に整列する必要があるため、その下部は非浮動要素の下部と同じになり、2 番目のサンプルでは非浮動要素の下部を何らかの方法で整列する必要があるため、フローティング要素と同じです。

つまり、7、8、9、10で機能させようとしています。

パディングを追加するとうまくいきますが、Firefox や Chrome では見栄えが悪くなります。

編集：

または、少なくとも、これができない理由を教えてください。

編集2:

または、問題がテーブルタグにある場合は? そのため、別のもの (div) を使用する必要があります。全体の構造はテーブルであり、セル内にいくつかの選択などがあるという違いがあるだけなので、ここでテーブルを使用するのは非常に自然です。しかし、問題がテーブルにある場合は、div で再作成しようとします。

編集3:

テーブルを削除しても、サンプル 1 の右側のフローティング要素が少し高くなります。float をパディングと絶対配置に置き換えようとしましたが、それでも高いです。

編集4:

サンプル1の場合display: none、左要素に設定すると、浮動要素の垂直位置が正常になります。

*** UPDATE: Sorry that was my mistake to put bounty on this question, i've already solved my problem.***
4

6 に答える 6

5

作業例: http://jsfiddle.net/qARBL/1/

何よりも - どうぞ、どうぞ、使わないでくださいinline styling- これはとても古い学校です! 代わりに外部 CSS スタイルシートを使用してください。

次の css を HTML に追加します。

1.

<select style="display:show;width: 60px;margin: 0;">
    <option selected="" value="1">1</option>
    <option value="2">2</option>
</select>

2.

<input type="text" value="100.0" style="width:100%; text-align:right;margin: 0;padding: 0;">

上記の 2 つの要素のマージンとパディングを調整するだけでうまくいきました。

于 2013-04-01T05:51:46.323 に答える
1

少なくとも、ケース 1 の解決策を見つけました。フローティング要素の配置を間違えた場合は、フロートをposition: absolute; right: 0; bottom: 0; ボトムに置き換えることで修正できます。0は重要な部分です。忘れてはならないのは、右側のパディングを左側の入力に追加し、外側の要素の位置を相対的に変更する必要があることです。

于 2013-04-01T08:30:04.103 に答える
1

calc()サイズを変更する必要のない他の要素に対して固定を設定できると仮定して、別のアプローチを試しましfloatたtable。

デモは次のとおりです。http://jsfiddle.net/RcSfF/

HTML

<input/><select><option>a</option></select>

CSS

input,select{
    box-sizing: border-box;
}
input{ 
    width: calc(100% - 60px);
}
select{
    width: 60px;
}

calc古いブラウザーでエミュレートするには、ポリフィルが必要です。

于 2013-04-05T23:45:13.310 に答える
1

マークアップ/cssであなたが達成しようとしていることが本当にわかりませんが、おそらくそれは、テーブル+フローティング+垂直方向の配置を使用しているためです。とにかく、ここにコードを投稿することを考えて、最初の問題を片付けました：

<style type="text/css">
.container { vertical-align: bottom; }
.content { white-space: nowrap; width: 20%; }
.col1 { float: right; display: block; }
.col1 select { display: block; width: 60px }
.col2 { display: block; overflow: hidden; padding-right: 2px; }
.col2 input { width: 100%; text-align: right }
</style>

<div class="container">
    <div class="content">
        <div class="col1">
            <select>
                <option selected="" value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>
        <div class="col2">
            <input type="text" value="100.0"/>
        </div>
    </div>
</div>

ここで動作を確認してください: http://jsfiddle.net/dreamyguy/MKQ75/

は有効でdisplay: showはないことに注意してください。 CSSdisplay: block

注意すべきもう 1 つのことは、 のfloated elementsように滑りやすいことabsolutely positioned elementsです。これらはドキュメントの通常の流れから外れるため、注意して取り扱う必要があります。必要な場合を除き、要素をフロートしないでください。フロートする場合は、親と兄弟のスタイルを変更して、期待どおりの結果が得られるようにします。

于 2013-04-03T22:41:51.103 に答える