3

3 つのスパンを 1 行に配置しようとしています。左スパンは固定幅です。右スパンは右にフロートし、これも固定幅です。中間スパンは、両方のスパンの間のスペースを消費することです。これらの 3 つのスパンはデータベースから取得されるため、削除ボタンとして機能する 3 番目のスパンを除いて、各フィールドに異なる値の複数の行が存在します。私はそれらを並べるためにあらゆることを試みましたが、これまでのところ、左のディスプレイをインラインブロックとフロート:左、右のディスプレイをフロート:右のディスプレイ:インラインブロックにすることで成功していますが、中央はそうではありませんdisplay:block に変更した後でも、2 つのスパンの間にあるスペースを埋めるために拡張したい。

いくつかの助けをいただければ幸いです。

/*Left Span*/
.word_native{
float: left;
clear: left;
margin-top: 7px;
height:22px;
line-height:22px;
margin-left: 10px;
margin-right: 10px;
}

/*Middle Span*/
.word_foreign{
margin-top: 6px;
height:22px;
height:22px;
line-height:22px;
line-height:22px;
display:inline-block;
}
*/

/*Right Span*/

float: right;
clear: right;
margin-top: 6px;
4

1 に答える 1

1

あなたがやっていることはテーブルに最適だと思われるので、html テーブルを使用してみませんか?

<table>
    <tr>
        <td class="word_native">native</td>
        <td class="word_foreign">foreign</td>
        <td class="del">del btn</td>
    </tr>
    <tr>
        <td class="word_native">native</td>
        <td class="word_foreign">foreign</td>
        <td class="del">del btn</td>
    </tr>
    ...
</table>

次に、CSS を使用して 3 番目の列を固定幅に設定できます。

于 2012-12-05T12:56:18.027 に答える