Question

我正在努力使以下小功能列表在响应式网页中运行，并且在小屏幕上查看时，我确实难以保持这些元素对齐。它甚至可能吗？

Payment terms :  CC
Price :          Average
Quality :        Mediocre
Colors :         white


<ul>
      <li><span class="left w25">Payment terms :</span>CC</li>
      <li><span class="left w25">Price :</span> Average</li>
      <li><span class="left w25">Quality :</span> Mediocre</li>
      <li><span class="left w25">Colors :</span>white</li>

.w25 {
    width: 25%;
}
.left {
    Float: left;
}

Answer 1

您需要创建行以防止换行进入下一行......对于您的行类，这样做：

.row:before,
.row:after { display:table; content: " "; }
.row:after { clear:both; }

然后你的HTML，更像是这样的东西：

<div class='row'>
   <span class="left w25">Payment terms :</span>
   <span class="left w75">CC</span>
</div>
<div class='row'>
   <span class="left w25">Price :</span>
   <span class="left w75">Average</span>
</div>
<div class='row'>
   <span class="left w25">Quality :</span>
   <span class="left w75">Mediocre</span>
</div>
</div class='row'>
   <span class="left w25">Colors :</span>
   <span class="left w75">white</span>
</div>

您可能还需要使用@media CSS为不同的分辨率实现不同的大小，这样您就可以使用w25用于大屏幕，而w50用于小屏幕。 Bootstrap 3执行此操作：

<span class='col-xs-6 col-sm-3'>Colors:</span>

在自举中，上述标签在手机分辨率下占用50％的宽度，但在所有其他分辨率下仅占25％...而且还有一百万种其他方法可以根据您的需要进行操作。

CSS列出对齐和响应式设计

1 个答案: