html - 在不同的行中显示文本和单选按钮

Question

它可能看起来很简单，但在发布之前确实尝试了很多。

我们在 link1 中有文本和单选按钮，如下图所示:

我们需要在两行中显示，第一行应该是文本，第二行应该显示大小 [L, M..etc] 就像 link2

html

<dt>
  <label class = required"
    <em>*<em>
    "Men T- shirt size : "
    :: after
  </label>
</dt>
<ul id ="options-456-list" class ="option-list">
  <li>L</li>
  <li>S</li>
  <li>XL</li>
  <li>M</li>
  <li>XXL</li>

CSS

.product-options ul.options-list label {
    font-weight: normal;
}

.product-options ul.options-list li {
    line-height: 1.5;
    margin-bottom: 7px;
}

我试过下面的代码，但对我没用....

display: block; 

 li{
    list-style: none;
}

请帮我用css解决

Answer 1

你可以将 Clear:both 设置到 ul 列表中

.product-options ul.options-list {   
    clear: both;
    display: block;
    padding-top: 10px;
}