在不同的行

Question

看起来很简单，但在发布之前确实尝试过很多。

我们有文字＆amp;单选按钮如下link1中的图像：

我们需要在2个不同的行中显示它，在第1行中它应该是文本，在第二行中它应该显示大小[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 list

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

Answer 2

您是否在文字后直接在HTML中尝试了<br>？它不是纯粹的CSS，但添加起来非常简单。

<dt>
  <label class = required"
    <em>*<em>
    "Men T- shirt size : "
    :: after
  </label>
</dt><br>

HTML br tag (w3schools.com)