Maison  >  Article  >  interface Web  >  帮忙修改下css代码,使得两组div可以inline_html/css_WEB-ITnose

帮忙修改下css代码,使得两组div可以inline_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-21 09:44:26900parcourir

本帖最后由 AAA428 于 2013-03-21 14:28:15 编辑

css div html

要疯了,在改进别人的一个系统,用的css代码是原来就有的。。我在表单里新增了5个select选项,每个select都有一个label,一起放在一个div中,所有共有5个div。
现在想让这5组div分两行显示,第一行三个,第二行两个。如果让我自己写倒是没有问题,问题是原本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的设置如下 (select设置是我新加的,因为选项也是我后来加的)

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}

回复讨论(解决方案)

现在弄好了没?

回楼上,好了,因为每个select都有一个div框架,所以只要设置div的format
在css文件中,把form_admin div {float:left; clear:left} 中的clear:left 去掉,
然后新加了一个div class:
div.div_break {clear:left}

然后在admin page中,每个需要独占一行的select 设置如下:

       
    
     

如果需要和上一个select输出在同一行,则不需要 class="div_break" 这一属性
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn