web-dev-qa-db-fra.com

Comment afficher 3 boutons sur la même ligne en css

Je veux afficher 3 boutons sur la même ligne en HTML. J'ai essayé deux options: Celle-ci: 

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

Et celui-là: 

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

Pour la deuxième option, j'ai utilisé un style pour le paragraphe:

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

Malheureusement, aucun d'entre eux n'allait bien et je n'arrive pas à trouver une autre option. Les premier et deuxième boutons sont affichés sur la même ligne, mais le troisième est affiché en bas ....... Pouvez-vous m'aider?

htmlcssstylesheet
9
Razvan N

Voici la réponse 

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

Faites quelque chose comme ça,

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

Ou

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

Vous devez faire flotter tous les boutons vers la gauche et vous assurer que sa largeur tient dans le conteneur externe.

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

Cela servira le but. Il n'y a aucun besoin de divs ou paragraphe. Si vous souhaitez que les espaces entre eux soient spécifiés, utilisez margin-left ou margin-right dans les classes 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

Les éléments suivants affichent les 3 boutons de la même ligne, à condition qu'il y ait suffisamment d'espace horizontal pour les afficher:

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

La seule raison pour laquelle les boutons ne s'affichent pas en ligne est s'ils ont été affichés: un bloc leur a été appliqué dans votre css.

0
Frankenscarf