0

Как запретить тексту съезжать в левый край? Нужно, чтобы "Выберите город..." был в пределах блока span и находился под "Выберите страну..."

http://jsfiddle.net/4aPe2/5/

.item {
    height: 30px;
}
.item span.tlt {
    min-width: 200px;
    display: inline-block;
}
span.tlt {
    color: gray;
    text-align: right;
    padding-right: 20px;
    vertical-align: top;
}
.info {
    width: 390px;
}
<div class="info">
<div class="item"><span class="tlt">Город:</span> <span>Выберите страну..., Выберите город...</span></div>
</div>

3 ответа 3

2

Задать спану с выбором города и страны класс (например tlt1) и изменять ему свойства как нужно.

.tlt1 {
    float: right;
}

Поставить тег переноса строки (
) после "Выберите страну..."

http://jsfiddle.net/4aPe2/11/

.item {
  height: 30px;
}
.item span.tlt {
  min-width: 200px;
  display: inline-block;
}
span.tlt {
  color: gray;
  text-align: right;
  padding-right: 20px;
  vertical-align: top;
}
.tlt1 {
  float: right;
}
.info {
  width: 390px;
}
<div class="info">
  <div class="item"><span class="tlt">Город:</span>  <span class="tlt1">Выберите страну...,<br />Выберите город...</span>
  </div>
</div>

1

Задаем span нужный id, например "text". Пишем css свойства:

#text {
float: right;
width: 170px;

}

http://jsfiddle.net/4aPe2/9/

.item {
    height: 30px;
}
#text {
    float: right;
    width: 170px;
}
.item span.tlt {
    min-width: 200px;
    display: inline-block;
}
span.tlt {
    color: gray;
    text-align: right;
    padding-right: 20px;
    vertical-align: top;
}
.info {
    width: 390px;
}
<div class="info">
    <div class="item"><span class="tlt">Город:</span>  <span id="text">Выберите страну..., Выберите город...</span>
    </div>
</div>

0

.item {
    height: 30px;
}

.tlt {
    min-width: 200px;
    display: inline-block;
}

.tlt {
    color: gray;
    text-align: right;
    padding-right: 20px;
    vertical-align: top;
}

.info {
    width: 390px;
}

.val {
    display: inline-block;
}
<div class="info">
<div class="item"><span class="tlt">Город:</span> <span class="val">Выберите страну...,<br>Выберите город...</span></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.