Good day, how to align the button with the text on one line? The fact is that because of the large text, it does not stand in one line and moves to the next.

<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>

enter image description here

  • 2
    jsfiddle.net/3ezcymyr - soledar10
  • @ soledar10 why is inline not enough? - splash58
  • one
    it is possible and with display: inline-block - you need to set the width and remove the indent + box-sizing: border-box - like this - jsfiddle.net/vamkr1fb - soledar10
  • great! and what you did not issue as an answer? Of course, I am not the author of the question, but I would accept your answer :) - splash58

1 answer 1

Option 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>

Option 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>