3

他の人のコードを編集しています。既存のフォームとcssファイルがあります。フォームに5つの「select」タグを追加し、selectをインラインにしたいのです。

各選択にはラベルが付いているので、2つをdivに入れて、5つのdivを作成します。最初の3つのdivを1つの行に配置し、最後の2つを別の行に配置したいと思います。私は物事を機能させるために何時間もcssファイルで作業していましたが、それでも失敗しました。

私が今得ている問題は、sを同じ行に入れることができず、それぞれが別々の行を占めるため、フォームに5行あります...しかし、必要なのは2行だけです。

CSSにあまり詳しくないので、それについて私を助けてください。

<html>
<link rel="stylesheet" href="css/mrbs.css.php" type="text/css">
        <link rel="stylesheet" media="print" href="css/mrbs-print.css.php" type="text/css">
    <form id="add_room" class="form_admin" action="addsystem.php" method="post">
      <fieldset>
      <legend>Add System</legend>

 <div id="sdw-div" style="white-space:nowrap; display:inline">     
    <label for = "sdw">sdw:</label>
    <select id="sdw" name="sdw" style="display:inline">
        <option selected="selected" value="0">0</option>
       <option  value="1">1</option>
       <option  value="2">2</option>
       <option  value="3">3</option>
       <option  value="4">4</option>
     </select>
</div>

 <div id="etl-div" style="white-space:nowrap; display:inline">       
    <label for = "etl">etl:</label>
     <select id="etl" style="display:inline" name = "etl">
        <option selected="selected" value="0">0</option>
        <option  value="1">1</option>
        <option  value="2">2</option>
        <option  value="3">3</option>
        <option  value="4">4</option>
    </select>
</div>

<div id="hdm-div" style="white-space:nowrap; display:inline">       
    <label for = "hdm">hdm:</label>
     <select id="hdm" style="display:inline" name = "hdm">
        <option selected="selected" value="0">0</option>
        <option  value="1">1</option>
        <option  value="2">2</option>
        <option  value="3">3</option>
        <option  value="4">4</option>
    </select>
</div><strong>

.........other two are just the same....

</form>
</html></strong>

これがform_adminのcssファイルです

form.form_admin {float: left; clear: left; margin: 2em 0 0 0}
.form_admin fieldset {float: left; width: auto; border: 1px solid <?php echo $admin_table_border_color ?>; padding: 1em}
.form_admin legend {font-size: small}
.form_admin div {float:left; clear:left;}
.form_admin label {
    display: block; float: left; clear: left;
    width: <?php echo $admin_form_label_width ?>em; min-height: 2.0em; text-align: right;
}
.form_admin input {
    display: block; float: left; clear: right;
</strong>    width: <?php echo $admin_form_input_width ?>em;
    margin-top: -0.2em; margin-left: <?php echo $admin_form_gap ?>em;
    font-family: <?php echo $standard_font_family ?>; font-size: small;
}
.form_admin select {
    display: block; float: left; clear:right; margin-left: 1.0em;
}

.form_admin input.submit {
    width: auto; margin-top: 1.2em; margin-left: <?php echo number_format(($admin_form_gap + $admin_form_label_width), 1, '.', '')?>em
}
4

4 に答える 4

6

float:left;それらをインラインとして表示するcssをdivに与えます。

また、タグ<strong>の終わりから削除します。html

Demo

于 2013-03-21T06:39:52.413 に答える
1

試す ：

display:inline-block

私はそれがelsewareオプションよりもうまくいくと思います

于 2016-05-31T16:19:41.753 に答える
0

float:left5つのdivすべてにスタイルを追加します。また、

<div style="clear:all"></div>

3番目のdivの後 適切な幅の親コンテナも必要でした。

于 2013-03-21T06:43:43.573 に答える
0

あなたdivsはすでにdisplay:inline、他に、あなたもfloat:leftそれらを-edしています。

それでも、それらが同じ行に表示されない場合は、1つだけあります。親コンテナには、同じ行のすべてのdivを収容するための適切な幅がありません。

したがって、親コンテナに適切な幅を指定します

このフィドルを参照してください。すべてが機能しています！

于 2013-03-21T06:45:52.330 に答える