停止浮动推右

只是一个简单的问题...元素停止浮动推右

我会先告诉你，我在一个视频有更好的理解这个问题：

正如你可以看到当我添加了更多字符的单词给我向右移动的浮动元素，导致列表与对方不一致。

这里是我的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执行此操作，以便这些元素也不会脱节。

任何想法我可以做到这一点？

谢谢

来源

2014-08-27 Dale Doback

只是一个说明，你似乎重复了很多CSS规则。您应该为所有这些列表元素创建一个'list-svg'类，然后为每个独立元素应用唯一规则。 – WinterMute 2014-08-27 12:35:47

谢谢我认为它好像很多CSS :) – 2014-08-27 12:38:23

或者，如果您需要它们有不同的规则，请使用：'.gear-svg，.color-svg .saloon-svg，.diesel-svg {}' 。这将使用4个类的规则，然后如果需要也可以分别对每个类进行样式设置。 – 2014-08-27 12:40:29

您可以定义一个特定的宽度。在图片右侧的元素中，您可以将它们全部移动多一点，并测量出最长可能的字符串。如果“自动”是最长的字符串，那么只需测量该宽度即可。然后将所有的LI设置为这个宽度。然后做一下CSS，让LIs符合你的愿望。

当它们更长时，字符串更改宽度。没有其他的了。如果你的宽度太小，那么这些单词可能会重叠。您应该利用图像旁边的空间，因为它接近20-30像素。

另外@Aleatoric说，使用一个类来适用于所有这些方式，您的其他网页不受影响。

来源

2014-08-27 12:39:43

停止浮动推右

回答

相关问题