Question

只是一个简单的问题...

我将首先向您展示我在视频中遇到的问题，以便更好地理解：

正如您所看到的，当我向浮动元素添加包含更多字符的单词时，它们会向右推，导致列表彼此不一致。

这是我的HTML：

<div class="ul-listing-container">
            <ul>
              <li class="diesel-svg">Diesel</li>
              <li class="saloon-svg">Saloon</li>
              <li class="gear-svg">Automatic</li>
              <li class="color-svg">Orange</li>
            </ul>
</div>

CSS：

.diesel-svg {
    list-style-type: none;
    background:url(/../media/img/nozzle.svg);
    background-size: 45px;
    background-repeat: no-repeat;
    padding-left:50px;
    float:left;
    color:#eee;
    font: 400 1.2em 'Open Sans', sans-serif;
    margin: 5px 10px 5px 0;
    background-position: 0px 7px;
    text-align: center;
}

.saloon-svg {
    list-style-type: none;
    background:url(/../media/img/saloon.svg);
    background-size: 45px;
    background-repeat: no-repeat;
    padding-left:50px;
    float:left;
    color:#eee;
    bottom:5px;
    font: 400 1.2em 'Open Sans', sans-serif;
    margin: 5px 10px 5px 1em;
    background-position: 0px 7px;
    text-align: center;
}

.gear-svg {
    list-style-type: none;
    background:url(/../media/img/gears.svg);
    background-size: 45px;
    background-repeat: no-repeat;
    padding-left:50px;
    float:left;
    color:#eee;
    bottom:5px;
    font: 400 1.2em 'Open Sans', sans-serif;
    margin: 5px 10px 5px 0;
    background-position: 0px 7px;
    text-align: center;
}

.color-svg {
    list-style-type: none;
    background:url(/../media/img/color.svg);
    background-size: 45px;
    background-repeat: no-repeat;
    padding-left:50px;
    float:left;
    color:#eee;
    bottom:5px;
    font: 400 1.2em 'Open Sans', sans-serif;
    margin: 5px 10px 5px 1em;
    background-position: 0px 7px;
    text-align: center;
}


.ul-listing-container {
    width:39%;
    float:left;
    margin:auto;
}

这将成为一个列表页面，因此我需要为元素的许多值更改做好准备。

我希望元素向右和向左推出，因为更多的字符只添加到右侧的instad中，并且还要执行此操作到下面的li，这样那些也不会出现问题

知道我怎么能这样做吗？

由于

Answer 1

您可以定义特定宽度。在图片右侧的元素中，您可以将它们全部移动一遍，并衡量最长的字符串可能是什么。如果自动是最长的字符串，那么只需测量该宽度。然后将所有LI设置为该宽度。然后执行css以使LI符合您的意愿。

当字符串变长时，字符串会改变宽度。没有别的。如果你放的宽度太小，那么单词可能会重叠。您应该利用图像旁边的空间，因为它几乎是20-30px。

同样@Aleatoric说使用一个类来应用所有这些，这样你的其他页面就不会受到影响。

停止浮动元素向右推

1 个答案: