Question

我想对齐两个fieldset offer＆amp;父字段集类型内的需求。如何处理下面提供的简单案例？它包括html和amp; CSS。
我在父字段集中使用um-ordered列表。但是对齐不起作用。提前感谢您的帮助。

slotID

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”元素（删除clear：两者都可以）。尽量不要同时使用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;
}

＆＃13;

<!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>

＆＃13;

＆＃13; 与问题无关：我将您的meta更改为utf-8。

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

3 个答案: