3

我正在编辑别人的代码,有一个现有的表单和 css 文件,我所做的是在表单中添加了 5 个“选择”标签,并且我想让选择内联。

每个选择都有一个标签,所以我将它们两个放在一个 div 中,因此我有 5 个 div。我想将前 3 个 div 放在一行,最后 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

给 div 一个float:left;CSS,将它们显示为内联。

<strong>html标签末尾删除。

Demo

于 2013-03-21T06:39:52.413 回答
1

尝试 :

display:inline-block

我发现它比其他软件选项效果更好

于 2016-05-31T16:19:41.753 回答
0

为所有五个 div添加样式float:left。还添加一个

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

在第三格之后。还需要一个宽度合适的父容器;

于 2013-03-21T06:43:43.573 回答
0

divs已经是了display:inline,此外,你也已经float:left-ed 他们了。

仍然如果它们没有出现在同一行,那么只有一件事,您的父容器没有适当的宽度来容纳同一行中的所有 div。

所以给你的父容器适当的宽度

看到这个小提琴。一切正常!

于 2013-03-21T06:45:52.330 回答