verteilen Tasten in div gleichmäßig

Question

Ich habe den folgenden Code (JSFiddle):

HTML:

<div id="content"> 
    <div id="mainBox" class="textBox"> 
    <div id="mainMenuBar"> 
     <button class="jqueryUIButton">New Diagnosis</button> 
     <button class="jqueryUIButton">My Diagnosises</button> 
     <button class="jqueryUIButton">My Account</button> 
    </div> 
    </div> 
</div> 

CSS:

#mainMenuBar { 
    background: linear-gradient(to bottom right, #30273a, #8d78a5); 
    padding: 5px; 
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    border-radius: 0px; 
    resize: none; 
    border:1px solid #30273a; 
    box-shadow: 0 0 10px #8d78a5; 
    border-radius: 15px 15px 15px 15px; 
} 

#content { 
    margin: 0 auto; 
    margin-top: 100px; // former 250px 
    padding: 0; 
    width: 750px; 
    max-width: 80%; 
    padding-bottom: 40px; 
    text-align: center; 
} 

JS:

$(".jqueryUIButton").button(); 

Jetzt befinden sich die drei Tasten in der horizontalen Mitte der DIV-Box. Aber ich möchte, dass sie gleichmäßig über die ganze Breite verteilt sind. Wie kann ich das machen?

Ich würde jeden Tipp lieben. Vielen Dank!

Answer 1

einfach the flexbox model verwenden:

display: flex; 
justify-content: space-around; 

Sie auch space-between und spielen mit Margen und Polsterung für eine fein abgestimmte Optik verwenden können.

Modified fiddle

Answer 2

FlexBox zur Rettung:

#mainMenuBar { 
 
    background: linear-gradient(to bottom right, #30273a, #8d78a5); 
 
    padding: 5px; 
 
    -webkit-border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
    border-radius: 0px; 
 
    resize: none; 
 
    border:1px solid #30273a; 
 
    box-shadow: 0 0 10px #8d78a5; 
 
    border-radius: 15px 15px 15px 15px; 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 

 
#content { 
 
    margin: 0 auto; 
 
    margin-top: 100px; // former 250px 
 
    padding: 0; 
 
    width: 750px; 
 
    max-width: 80%; 
 
    padding-bottom: 40px; 
 
    text-align: center; 
 
}

<div id="content"> 
 
    <div id="mainBox" class="textBox"> 
 
    <div id="mainMenuBar"> 
 
     <button class="jqueryUIButton">New Diagnosis</button> 
 
     <button class="jqueryUIButton">My Diagnosises</button> 
 
     <button class="jqueryUIButton">My Account</button> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Das ist für Flexbox eine typische Anwendung ist:

https://jsfiddle.net/aj88xck2/

Fügen Sie einfach display: flex; und justify-content: space-around; (oder Leerzeichen dazwischen) zum Container hinzu.

Answer 4

<button class="jqueryUIButton" style="height:20px; width:145px">New Diagnosis</button>

Works 100%

** The length of the bar is 440px, divided by 3 you get 145px; **