it-swarm.com.de

So zeigen Sie 3 Tasten in derselben Zeile in css an

Ich möchte 3 Tasten in derselben Zeile in HTML anzeigen. Ich habe zwei Optionen ausprobiert: Diese hier: 

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

Und das hier: 

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

Für die zweite Option habe ich ein Styling für den Absatz verwendet:

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

Leider war keiner von ihnen in Ordnung und ich kann keine andere Option herausfinden. Der erste und der zweite Button werden in derselben Zeile angezeigt, der dritte wird jedoch niedriger angezeigt ....... Können Sie mir helfen?

9
Razvan N

Hier ist die Antwort 

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

Mach so etwas,

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

Oder

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

Sie müssen alle Tasten nach links bewegen und sicherstellen, dass die Breite in den äußeren Container passt.

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

Dies wird dem Zweck dienen. Es sind keine Divs oder Absätze erforderlich. Wenn Sie möchten, dass die Leerzeichen zwischen ihnen angegeben werden, verwenden Sie in den CSS-Klassen Margin-Left oder 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

Im Folgenden werden alle drei Schaltflächen in derselben Zeile angezeigt, vorausgesetzt, es ist genügend Platz für die Anzeige vorhanden:

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

Der einzige Grund, warum die Schaltflächen nicht inline angezeigt werden, besteht darin, dass ihnen in ihrem CSS-Format Anzeige: Block zugewiesen wurde.

0
Frankenscarf