Html 如何使这两个 <div> 内联？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15541002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make these two <div> inline?
提问by user1453951
I'm editing someone other's code, there's an existing form and css file, what I did is that I added 5 "select" tags into the form, and I want to make the selects inline.
我正在编辑其他人的代码，有一个现有的表单和 css 文件，我所做的是在表单中添加了 5 个“选择”标签，并且我想让选择内联。
Each select has a label, so I put them two in a div, thus I have 5 divs. I want to put the first 3 div in one row, and last 2 in another row. I was working on the css file for hours to get things work, but still failed.
每个选择都有一个标签，所以我将它们两个放在一个 div 中，因此我有 5 个 div。我想把前 3 个 div 放在一行，最后 2 个放在另一行。我在 css 文件上工作了几个小时以使事情工作，但仍然失败。
The problem I'm getting now is that I cannot put the s in the same line, each of them occupies a separate line, so I have 5 rows in the form now... but I just need 2 rows.
我现在遇到的问题是我不能将 s 放在同一行中，它们每个都占据单独的一行，所以我现在在表单中有 5 行......但我只需要 2 行。
Please help me on that, not quite familiar with 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><strong>
.........other two are just the same....
</form>
</html></strong>
and here is the css file for form_admin
这是 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
}
回答by Dipesh Parmar
回答by Kai Hayati
try :
尝试 ：
display:inline-block
i find it works better than elseware options
我发现它比其他软件选项更有效
回答by kuldeep.kamboj
Add style float:leftfor all five div. Also add a
float:left为所有五个 div添加样式。还添加一个
<div style="clear:all"></div>
after third div. Also needed a parent container with proper width;
在第三个div之后。还需要一个具有适当宽度的父容器；
回答by Manish Mishra
your divsare already display:inline, besides , you also have float:left-ed them.
你divs已经是display:inline，此外，你也已经编辑了float:left它们。
still if they don't appear in the same line,then there is just one thing, your parent container doesn't have proper width to accommodate all the divs in same line.
如果它们没有出现在同一行中，那么只有一件事，您的父容器没有合适的宽度来容纳同一行中的所有 div。
so give appropriate width to your parent container
所以给你的父容器适当的宽度
see this fiddle. everything's working!
看到这个小提琴。一切正常！
