Как отобразить 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
css html stylesheet

5 ответов

вот ответ:

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

Скрипка

27

сделайте что-нибудь вроде этого,

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

Скрипка Демо

или

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

Скрипка Демо

3

это послужит цели. Нет необходимости в каких-либо divs или абзаце. Если вы хотите, чтобы пробелы между ними были указаны, используйте 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

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

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

ниже будут отображаться все 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.

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

0