停止浮動推右

只是一個簡單的問題...元素停止浮動推右

我會先告訴你，我在一個視頻有更好的理解這個問題：

正如你可以看到當我添加了更多字符的單詞給我向右移動的浮動元素，導致列表與對方不一致。

這裏是我的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

停止浮動推右

回答

相關問題