web-dev-qa-db-ja.com

CSSで同じ行に3つのボタンを表示する方法

HTMLの同じ行に3つのボタンを表示したい。私は2つのオプションを試しました：これ1つ：

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

2番目のオプションでは、段落にスタイルを使用しました。

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

悲しいことに、それらのどれも大丈夫ではなく、私は他のオプションを見つけることができないようです。最初と2番目のボタンは同じ行に表示されますが、3番目のボタンは下に表示されます...

htmlcssstylesheet
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

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

または

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 Demo

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や段落は必要ありません。それらの間のスペースを指定する場合は、cssクラスでmargin-leftまたはmargin-rightを使用します。

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

ボタンがインラインで表示されない唯一の理由は、CSS内でdisplay：blockが適用されている場合です。

0
Frankenscarf