1

Доброго времени суток, как выровнить кнопку с текстом на одной строчке? Дело в том, что из-за большого текста, он не встает в одну строчку и переходит на следующую.

<div style="padding: 0 20px;">
  <div style="display: inline-block;">
    [button title="СКАЧАТЬ" icon="icon-download" icon_position="left" link="documents/ustav.doc" target="_blank"]
  </div>
  <div style="display: inline-block;">
    <p style="font-size: 20px; color: #3b4146;">- Устав автомобильного транспорта</p>
  </div>
</div>

[divider height="30" style="default" line="default" themecolor="1"]
<div style="padding: 0 20px;">
  <div style="display: inline-block;">
    [button title="СКАЧАТЬ" icon="icon-download" icon_position="left" link="documents/fz257.doc" target="_blank"]
  </div>
  <div style="display: inline-block;">
    <p style="font-size: 20px; color: #3b4146;">- ФЗ РФ № 257 "Об автомобильных дорогах и о дорожной деятельности в Российской Федерации и о внесении изменений в отдельные законодательные акты Российской Федерации"</p>
  </div>
</div>

введите сюда описание изображения

4
  • 2
    jsfiddle.net/3ezcymyr
    – soledar10
    10 мая 2016 в 8:42
  • @soledar10 а почему inline недостаточно?
    – splash58
    10 мая 2016 в 8:53
  • 1
    можно и с display: inline-block - необходимо задать ширину и убрать отступ + box-sizing: border-box - приблизительно так - jsfiddle.net/vamkr1fb
    – soledar10
    10 мая 2016 в 9:00
  • здорово! а чего вы как ответ не оформили? Я конечно, не автор вопроса, но я бы принял ваш ответ :)
    – splash58
    10 мая 2016 в 9:02

1 ответ 1

1

Вариант 1

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  padding: 0 20px;
  margin: 15px auto;
  font-size: 0;
}
.container > div {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
}
.container > div:nth-of-type(1) {
    width: 20%;
} 
.container > div:nth-of-type(2) {
  width: 80%;
  padding-left: 15px;
}
.btn-download {
  min-width: 110px;
  text-align: center;
  display: inline-block;
  background: #555;
  color: #fff;
  text-decoration: none;
  padding: 10px;
}
.btn-download:before {
  content: '\f019';
  font-family: FontAwesome;
  vertical-align: middle;
  margin-right: 5px;
}
.btn-download:hover {
  background: #000;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <div>
    <a href="documents/fz257.doc" target="_blank" class="btn-download">СКАЧАТЬ</a>
  </div>
  <div>
    <p style="font-size: 20px; color: #3b4146;">- ФЗ РФ № 257 "Об автомобильных дорогах и о дорожной деятельности в Российской Федерации и о внесении изменений в отдельные законодательные акты Российской Федерации"</p>
  </div>
</div>

<div class="container">
  <div>
    <a href="documents/fz257.doc" target="_blank" class="btn-download">СКАЧАТЬ</a>
  </div>
  <div>
    <p style="font-size: 20px; color: #3b4146;">- ФЗ РФ № 257 "Об автомобильных дорогах и "</p>
  </div>
</div>

<div class="container">
  <div>
    <a href="documents/fz257.doc" target="_blank" class="btn-download">СКАЧАТЬ</a>
  </div>
  <div>
    <p style="font-size: 20px; color: #3b4146;">- ФЗ РФ № 257 "Об автомобильных дорогах и о дорожной деятельности в Российской Федерации и о внесении изменений в отдельные законодательные акты Российской Федерации"</p>
  </div>
</div>

Вариант 2

.container{
    display: table;
    width: 100%;
    padding: 0 10px;
    margin: 15px auto;
}
.container > div{
    display: table-cell;
    vertical-align: middle; 
    padding: 0 10px;
}
.container > div:nth-of-type(1){
    width: 20%;
}
.btn-download{    
    text-align: center;
    display: block;
    background: #555;
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
}
.btn-download:before{
    content: '\f019';
    font-family: FontAwesome;    
    vertical-align: middle;
    margin-right: 5px;    
}
.btn-download:hover{
    background: #000;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <div>    
    <a href="documents/fz257.doc" target="_blank" class="btn-download">СКАЧАТЬ</a>
  </div>
  <div>
    <p style="font-size: 20px; color: #3b4146;">- ФЗ РФ № 257 "Об автомобильных дорогах и о дорожной деятельности в Российской Федерации и о внесении изменений в отдельные законодательные акты Российской Федерации"</p>
  </div>
</div>

<div class="container">
  <div>    
    <a href="documents/fz257.doc" target="_blank" class="btn-download">СКАЧАТЬ</a>
  </div>
  <div>
    <p style="font-size: 20px; color: #3b4146;">- ФЗ РФ № 257 "Об автомобильных дорогах и "</p>
  </div>
</div>

<div class="container">
  <div>    
    <a href="documents/fz257.doc" target="_blank" class="btn-download">СКАЧАТЬ</a>
  </div>
  <div>
    <p style="font-size: 20px; color: #3b4146;">- ФЗ РФ № 257 "Об автомобильных дорогах и о дорожной деятельности в Российской Федерации и о внесении изменений в отдельные законодательные акты Российской Федерации"</p>
  </div>
</div>

0

Ваш ответ

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

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