如何制作這兩個 <div> 排隊？
[英]How to make these two <div> inline?
問題描述
我正在編輯別人的代碼，有一個現有的表單和css文件，我做的是我在表單中添加了5個“select”標簽，我想讓內聯選擇。
每個選擇都有一個標簽，所以我把它們放在一個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 個解決方案
解決方案1
4 已采納 2013-03-21 06:39:52
解決方案2
0 2013-03-21 06:43:43
為所有五個div添加樣式float:left 。 還要添加一個
<div style="clear:all"></div>
在第三個div之后。 還需要一個寬度適當的父容器;
解決方案3
0 2013-03-21 06:45:52
你的divs已經display:inline ，此外，你還有float:left -ed它們。
但是如果它們沒有出現在同一行中，那么只有一件事，你的父容器沒有適當的寬度來容納同一行中的所有div。
因此請為您的父容器指定適當的寬度
看到這個小提琴 。 一切正常！
解決方案4
0 2016-05-31 16:19:41
嘗試：
display:inline-block
我發現它比elseware選項更好用
使兩個div在dompdf上內聯
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.