如何在父字段集内对齐子字段集？

Question

我想在父字段集类型内对齐两个字段集“供求”。 对于下面提供的简单案例，该怎么办？ 它同时包含html和css。
我在父字段集中使用um-ordered列表。 但是对齐方式不起作用。 预先感谢您的帮助。

<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Align Fieldset</title>
<style>
.header{
    width: 100%;
    clear:both;
    display: inline-block;
    font-size: medium;
    float:left;
}
.subheader{
    width: 100%;
    clear:both;
    display: inline-block;
    font-size: medium;
    float:left;
}
.list{
    list-style-type: none;
    display: inline-block;
    width: auto;
    float: left;
}
</style>
</head>

<body>

<p>Aligning offer & Demand on the same line</p>
<fieldset  class="header">

<legend>Type</legend>
<ul class= "list">
 <li>
 <fieldset class="subheader">   
  <legend ><label> 
  <input type="radio" name="Type" value="Offer" checked="checked"
  />Offer</label>
  </legend>
 </fieldset>  
  </li>   
  <li>
  <fieldset class="subheader">   
      <legend><label> 
           <input type="radio" name="Type" value="Demand">Demand</label>
      </legend> 
  </fieldset>
  </li>
  </ul>
  </fieldset> <!-- End of type -->
</body>
</html>

Answer 1

尝试这个

<style>
.header{
width: 100%;
clear:both;
display: inline-block;
font-size: medium;
float:left;
}
.subheader{
/* change */
width: auto;
clear:both;
display: inline-block;
font-size: medium;
float:left;
}
.list{
list-style-type: none;
display: inline-block;
width: auto;
float: left;
 }
/* add */
li{
  float:left;
}
</style>

Answer 2

您可以为“ .list”（例如：100％）添加特定的宽度，并为“ .subheader”元素添加特定的宽度（将其清除：都清除）。 尽量不要同时使用display：inline-block和float。

Answer 3

由于已将字段集包装到列表中，因此应将注意力集中在ul和li 。 我清除了所有无关的样式。 display: flex是什么使此布局问题不胜枚举。 以下是已更改的相关CSS：

.list {
  list-style-type: none;
  width: 100%;
  display: flex;
}
.list li {
  margin: 0 30px 0 0;
}

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Align Fieldset</title> <style> .header { width: 100%; } .subheader { width: 100%; font-size: medium; } .list { list-style-type: none; width: 100%; display: flex; } .list li { margin: 0 30px 0 0; } </style> </head> <body> <p>Aligning offer & Demand on the same line</p> <fieldset class="header"> <legend>Type</legend> <ul class="list"> <li> <fieldset class="subheader"> <legend> <label> <input type="radio" name="Type" value="Offer" checked="checked" />Offer</label> </legend> </fieldset> </li> <li> <fieldset class="subheader"> <legend> <label> <input type="radio" name="Type" value="Demand">Demand</label> </legend> </fieldset> </li> </ul> </fieldset> <!-- End of type --> </body> </html>

与此问题无关：我将您的meta更改为utf-8 。

如何在父字段集内对齐子字段集？

问题描述

3 个解决方案

解决方案1
0 2016-01-28 08:15:53

解决方案2
0 2016-01-28 08:23:29

解决方案3
0 已采纳 2016-01-28 08:58:18

如何在父字段集内对齐子字段集？

问题描述

3 个解决方案

解决方案1 0 2016-01-28 08:15:53

解决方案2 0 2016-01-28 08:23:29

解决方案3 0 已采纳 2016-01-28 08:58:18

解决方案1
0 2016-01-28 08:15:53

解决方案2
0 2016-01-28 08:23:29

解决方案3
0 已采纳 2016-01-28 08:58:18