在<hr />标记中包裹<ul>菜单

Question

我有一个使用无序列表的简单菜单。我想将它包装在两个<hr />元素中。问题是第二小时不会出现在<ul>之后，而是接下来的到第一个：

＆＃13;

＆＃13;

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: static;
  margin-bottom: 2px;
}
header li {
  display: inline-block;
  float: left;
  margin-right: 1px;
}

＆＃13;

<header>
  <hr />
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li><a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>
    </li>
    <li><a href="#">Menu 3</a>
    </li>
    <li><a href="#">Menu 4</a>
    </li>
  </ul>
  <hr />
</header>

＆＃13;

＆＃13;

＆＃13;

我该如何解决这个问题？

Answer 1

您在display: inline-block;使用float: left;和li这是不必要的，因为使用float: left;会将其从流量中删除，从而减少对display: inline-block;的需求}。

将float: left;应用于li也意味着需要清除hr以确保它显示在ul之后。

由于display: inline-block;会确保水平显示li，您只需从float: left;移除li，而无需清除hr。

＆＃13;

＆＃13;

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: static;
  margin-bottom: 2px;
}
header li {
  display: inline-block;
  margin-right: 1px;
}

＆＃13;

<header>
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li><a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>
    </li>
    <li><a href="#">Menu 3</a>
    </li>
    <li><a href="#">Menu 4</a>
    </li>
  </ul>
  <hr />
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您将inline-block应用于li，那么您不需要使用float:left，如果您使用float:left，则需要清除下一个元素之后，在这种情况下<hr />

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: static;
  margin-bottom: 2px;
}
header li {
  display: inline-block;
  /* float:left */
  margin-right: 1px;
}

<header>
  <hr />
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li><a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>
    </li>
    <li><a href="#">Menu 3</a>
    </li>
    <li><a href="#">Menu 4</a>
    </li>
  </ul>
  <hr />
</header>

Answer 3

试试这个：

<RadioGroup android:layout_height="wrap_content" android:layout_width="match_parent">

<android.support.v7.widget.AppCompatRadioButton style="@style/MyRow"
    android:id="@+id/one"
    android:text="@string/someText"
    />

<android.support.v7.widget.AppCompatRadioButton style="@style/MyRow"
    android:id="@+id/two"
    android:text="@string/someText"
    />

<android.support.v7.widget.AppCompatRadioButton style="@style/MyRow"
    android:id="@+id/three"
    android:text="@string/someText"
    />

</RadioGroup>

DEMO HERE