ホームページ  >  記事  >  ウェブフロントエンド  >  2 つの div セットが inline_html/css_WEB-ITnose になるように CSS コードを変更するのを手伝ってください。

2 つの div セットが inline_html/css_WEB-ITnose になるように CSS コードを変更するのを手伝ってください。

WBOY
WBOYオリジナル
2016-06-21 09:44:26915ブラウズ

この投稿は AAA428 によって最終編集されました: 2013-03-21 14:28:15

css div html

私は他の人のシステムを改善していますが、使用されている CSS コードはすでにそこにあります。 。フォームに 5 つの新しい選択オプションを追加しました。各選択にはラベルがあり、合計 5 つの div にまとめられています。
ここで、これら 5 つの div グループを 2 行に表示し、最初の行に 3 つ、2 行目に 2 つ表示したいとします。自分で書く必要がある場合は問題ありませんが、問題は、このフォームのスタイルが元々 CSS に含まれており、元のスタイルに基づいて変更する必要があることです。変更しましたが、それでも機能しませんでした。 。 。もう発狂してるよ! !

フォームと 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>.........以此类推,还有两个不贴了</form></html>


cssファイルのform_adminの設定は以下の通りです(オプションも後から私が追加したので、選択した設定は私が新たに追加したものです)

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;    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}

ディスカッション(解決策)への返信

もう終わりましたか?

上の階に戻ります。各選択には div フレームがあるので、div の形式を設定するだけです。
CSS ファイルで、form_admin div {float:left; clear:left} の clear:left を削除し、
次に追加します新しい div クラス:
div.div_break {clear:left}

次に、管理ページで、独自の行に配置する必要がある各選択が次のように設定されます:
303b88a379565d525578a4bce8371dd7 = "etl">
16b28748ea4df4d9c2150843fecfba68
と同じ行に出力する必要がある場合前の選択では、属性 class="div_break" は必要ありません

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。