Стоп плавал элементы толкающие правой

только быстрый вопрос ...Стоп плавал элементы толкающие правой

я сначала покажу вам меня проблема в видео для лучшего понимания:

Как вы можете видеть, когда Я добавляю слова с большим количеством символов в мои плавающие элементы, которые они нажимают вправо, заставляя списки не соответствовать друг другу.

Вот мой 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; 
}

Это будет листинг страницы, поэтому мне нужно быть готовым к изменениям многих значений к элементам.

Я хочу, чтобы элементы выталкивались вправо и влево, так как больше символов добавлено только для установки справа, а также для того, чтобы выполнить это ниже, чтобы они были не в линии.

Любая идея, как я мог это сделать?

Thanks

источник

2014-08-27 Dale Doback

Просто обратите внимание, что вы, кажется, повторяете много правил CSS. Вы должны сделать один класс 'list-svg', который вы используете для всех этих элементов списка, а затем идентификатор для каждого отдельного элемента для применения уникальных правил. – WinterMute

Спасибо, я думал, что это похоже на много CSS :) –

В качестве альтернативы, если вам когда-нибудь понадобится иметь разные правила, используйте:. .gear-svg, .color-svg .saloon-svg, .diesel-svg {} ' , Это будет использовать правила для 4 классов, тогда вы можете также стилизовать каждый отдельно, если это необходимо. –

Вы можете определить определенную ширину. В элементах, которые являются правильными для изображения, вы можете перемещать их по всему чуть-чуть больше и оценивать, что может быть вашей ДОЛГОЙ возможной струной. Если Automatic является самой длинной строкой, тогда просто выберите эту ширину. А затем установите для всех LI эту ширину. Затем сделайте css так, чтобы LI соответствовали по своему желанию.

Строки меняют ширину, когда они больше, чем должны. Больше нечего. Если вы установите слишком малую ширину, тогда слова могут оказаться перекрывающимися. Вы должны использовать пространство рядом с изображением, так как это почти 20-30 пикселей.

Также, что @Aleatoric сказал, что класс применяется для всех этих способов, так что ваши другие страницы не затрагиваются.

источник

2014-08-27 12:39:43

Стоп плавал элементы толкающие правой

ответ

Смежные вопросы