it-roy-ru.com

Как отобразить 3 кнопки на одной строке в CSS

Я хочу отобразить 3 кнопки на одной строке в HTML. Я попробовал два варианта: Этот: 

    <div style="width:500px;">
        <div style="float: left; width: 130px"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div>
        <div style ="float: none; width: 130px"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div>
        <div style ="float: right; width: 130px"><button class="msgBtnBack">Back</button></div>
    </div> 

И этот: 

    <p style="float: left; width: 130px"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></p>
    <p style ="float: none; width: 130px"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></p>
    <p style ="float: right; width: 130px"><button class="msgBtnBack">Back</button></p>

Для второго варианта я использовал стилизацию для абзаца:

<style>
   p {display:inline}
</style>

К сожалению, ни один из них не был в порядке, и я не могу найти какой-либо другой вариант. Первая и вторая кнопки отображаются в одной строке, а третья отображается ниже ... Вы можете мне помочь?

9
Razvan N

Вот ответ 

CSS

#outer
{
    width:100%;
    text-align: center;
}
.inner
{
    display: inline-block;
}

HTML

<div id="outer">
  <div class="inner"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div>
  <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div>
  <div class="inner"><button class="msgBtnBack">Back</button></div>
</div>

Fiddle

28
Karuppiah RK

Сделай что-нибудь подобное,

HTML:

<div style="width:500px;">
    <button type="submit" class="msgBtn" onClick="return false;" >Save</button>
    <button type="submit" class="msgBtn2" onClick="return false;">Publish</button>
    <button class="msgBtnBack">Back</button>
</div>

CSS:

div button{
    display:inline-block;
}

Fiddle Демо

Или же

HTML:

<div style="width:500px;" id="container">
    <div><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div>
    <div><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div>
    <div><button class="msgBtnBack">Back</button></div>
</div>

CSS:

#container div{
    display:inline-block;
    width:130px;
}

Fiddle Демо

4
Pranav C Balan

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

CSS:

.btn{

   float:left;
}

HTML:

    <button type="submit" class="btn" onClick="return false;" >Save</button>
    <button type="submit" class="btn" onClick="return false;">Publish</button>
    <button class="btn">Back</button>
1
Navin

Это послужит цели. Нет необходимости в каких-либо div или параграфе. Если вы хотите, чтобы пробелы между ними были указаны, используйте margin-left или margin-right в классах css.

<div style="width:500px;">
    <button type="submit" class="msgBtn" onClick="return false;" >Save</button>
    <button type="submit" class="msgBtn2" onClick="return false;">Publish</button>
    <button class="msgBtnBack">Back</button>
</div> 
1
sree

Следующее отобразит все 3 кнопки в одной строке, если для их отображения достаточно места по горизонтали:

<button type="submit" class="msgBtn" onClick="return false;" >Save</button>
<button type="submit" class="msgBtn2" onClick="return false;">Publish</button>
<button class="msgBtnBack">Back</button>
// Note the lack of unnecessary divs, floats, etc. 

Единственная причина, по которой кнопки не будут отображаться встроенными, заключается в том, что они имеют display: block, примененный к ним внутри вашего css.

0
Frankenscarf