如何使这两个内联?(How to make these two inline?)

编程入门 行业动态 更新时间:2024-10-28 08:16:20
如何使这两个内联?(How to make these two 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 }

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.

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.

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.

Please help me on that, not quite familiar with 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.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 }

最满意答案

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

同时从html标记的末尾删除<strong> 。

Demo

Give div a float:left; css that will display them as inline.

Also remove <strong> from end of html tag.

Demo

更多推荐

css,form_admin,php,电脑培训,计算机培训,IT培训"/> <meta name="descriptio

本文发布于:2023-08-02 09:28:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1372239.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:内联   这两个   inline

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!