Question

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

每个选择都有一个标签，所以我把它们放在一个div中，因此我有5个div。我想将前3个div放在一行中，将最后2个放在另一行中。我在css文件上工作了好几个小时才能让事情顺利进行，但仍然失败了。

我现在遇到的问题是我不能把s放在同一行，每个都占用一个单独的行，所以我现在在表单中有5行......但我只需要2行。 / p>

请帮助我，不太熟悉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
}

Answer 1

给div一个float:left; css，将其显示为内联。

同时从<strong>代码的末尾删除html。

<强> `Demo`

Answer 2

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

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

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

Answer 3

您的divs已经display:inline，此外，您还有float:left - 编辑。

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

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

请参阅此fiddle。一切正常！

Answer 4

尝试：

display:inline-block

我觉得它比elseware选项更好用

如何使这两个<div>内联？</div>

4 个答案:

<强> `Demo`

如何使这两个<div>内联？</div>

4 个答案:

<强> Demo

<强> `Demo`