Интервал между двумя ярлыками Использование CSS

У меня есть две метки в нижнем колонтитуле моего мобильного сайта. Иногда название выбранного продукта является большим и очень близко к цене, как показано ниже:Интервал между двумя ярлыками Использование CSS

enter image description here

HTML-:

<div style="margin:5px;"> 

      <span class="stickyProductctName">This is a really really really rea</span> 
      <div class="stickyPrice">$1142.00</div> 
     </div>

Стили для обоих элементов приведены ниже:

#stickyFooter .stickyProductctName { 
text-transform: uppercase; 
width: 85%; 
} 


#stickyFooter .stickyPrice { 
font-weight: bold; 
width: 15%; 
float: right; 
margin-right: 20px; 
}

Как его улучшить? Заверни это!

источник

2014-10-30 john doe

В вашем CSS, почему вы используете #stickyFooter – chanchal

То есть идентификатор элемента которого CSS будет применен. –

Это поведение объясняется тем, что у вас есть общая ширина элементов 100% и margin-right 20px. Он переполнен.

источник

2014-10-30 15:50:39

Можете ли вы предоставить возможное решение с примером? –

Да! Я понятия не имею, что вы говорите. –

Вы можете проверить [здесь] (http://jsfiddle.net/ggyznryz/1/). –

положить margin-right на номер .stickyProductctName;
добавить display:inline-block; к .stickyPrice

источник

2014-10-30 15:56:29 Luciano

Цена отсекает экран, если я не помещаю маржи справа. –

Как бой укладывать их друг на друга для мобильного зрения?

CSS:

#stickyFooter .stickyProductctName { 
    text-transform: uppercase; 
    display: block; 
    text-align: center; 
} 


#stickyFooter .stickyPrice { 
    font-weight: bold; 
    text-align: center; 
}

источник

2014-10-30 15:57:29

Вот JSFiddle. http://jsfiddle.net/shannabarnard/Ls75o3cr/

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

Измените ширину и дайте цену как левому, так и правому прокладке.

HTML:

<div style="margin:5px;"> 
    <span class="stickyProductctName">This is a really re ally reall yreally really re ally really re reall y really really rereally really really re rea</span> 
    <span class="stickyPrice">$1142.00</span> 
</div>

CSS:

.stickyProductctName { 
text-transform: uppercase; 
float: left; 
display:inline; 
width:85%; 
} 

.stickyPrice { 
font-weight: bold; 
width: 10%; 
float: right; 
margin: 0 10px; 
}

источник

2014-10-30 16:02:01 Pianoc

Привет, Шанна, я думаю, что ссылка на JSFiddle отсутствует. –

Спасибо! Я сделал редактирование. – Pianoc

Ошибка заключается в том, что вы использовали запас вместо заполнения. Пока используется пограничный ящик (он является стандартным для фреймворков), заполнение ест внутреннюю часть контейнеров вместо их добавления. Все, что вам нужно изменить это:

#stickyFooter .stickyPrice { 
    font-weight: bold; 
    width: 15%; 
    float: right; 
    padding-right: 20px; 
}

В случае, если у вас нет границ ящик на сайте, here is a good article about it. Каркасы обычно используют правило так:

* { 
    box-sizing: border-box; 
}

источник

2014-10-30 19:12:31 austinthedeveloper

Интервал между двумя ярлыками Использование CSS

ответ

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