Wie man diese wenigen divs innerhalb div

-3

positionieren Ich habe ein Problem mit der Mitte horizontal Tauchgänge. Ich habe eine Menüleiste und drinnen ein paar Tauchgänge. Die Menüleiste ist auf der Seite zentriert, aber diese Tauchgänge drinnen bleiben auf der linken Seite, ich habe versucht, Padding, aber dann wird die Menüleiste größer. Ich lege den Code unten und vielleicht jemand wird wissen, wie es gehtWie man diese wenigen divs innerhalb div

.menubar1{ 
    background: #ffffff00; 
    width:95%; 
    max-width:95%; 
    margin-right: auto; 
    height: 70px; 
    margin-left: auto; 
    margin-top: 5%; 
    border-top-right-radius: 50px; 
    border-top-left-radius: 50px; 
    position: static; 
    margin-bottom: -18px;  
} 
.menubar1>div{ 
    width: 17%; 
    display: inline-block; 
    vertical-align: top; 
    height: 45%; 
    zoom: 1; 
    background-position: center; 
    text-align: center; 
    font-size: 23px; 
    padding-top: 10px; 
    font-family: cursive;   
    font-weight: 600; 
    margin-top: 5px; 
} 
.menubar1:after { 
    content: ""; 
    width: 100%; 
    display: inline-block; 
} 

.how2{ 
    background-color: #white; 
    background-size: cover; 
    max-width: 250px; 
    min-width: 135px; 
    color: gold; 
} 

////HTML CODE 
<div class="menubar1"> 
    <div class="how2" style="cursor: pointer;" 
    onclick="window.location='http://somepage.com';">Title</div> 
    ...and other 4 same divs 
</div>

Quelle

2017-12-21 Adam Płaszczyk

'und andere 4 gleiche divs': warum nicht hinzufügen ... –

So viel falsch hier, nur die drei schlimmsten direkt aus dem HTML-Code:' div', 'style =" cursor: pointer; "', ' onclick = "window.location ..." - warum gehts t durch so viel Mühe, Sachen zu machen _work/look like_ eine Liste von Links, anstatt _ eine Liste von Links_ ... verwenden? ul/li/a ist, was Sie hier verwenden möchten. Sie sollten sich über die Grundlagen/den aktuellen Stand der Technik beim Erstellen von Navigationsmenüs informieren. – CBroe

Dieser Css-Code stammt aus einer Datei und der Rest von HTML-Code stammt aus einer anderen Datei .less.Der Code, den ich schrieb, ist nur vereinfacht, um ein Problem zu zeigen –

Haben Sie Zentrum wie das zu bedeuten?

text-align:center;

auf menubar1. Auch das Inline-Styling ist schlecht und redundant.

.menubar1{ 
 
    background: #ffffff00; 
 
    width:95%; 
 
    max-width:95%; 
 
    margin-right: auto; 
 
    height: 70px; 
 
    margin-left: auto; 
 
    margin-top: 5%; 
 
    border-top-right-radius: 50px; 
 
    border-top-left-radius: 50px; 
 
    position: static; 
 
    margin-bottom: -18px; text-align:center; 
 
} 
 
.menubar1>div{ 
 
    width: 17%; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 45%; 
 
    zoom: 1; 
 
    background-position: center; 
 
    text-align: center; 
 
    font-size: 23px; 
 
    padding-top: 10px; 
 
    font-family: cursive;   
 
    font-weight: 600; 
 
    margin-top: 5px; 
 
} 
 
.menubar1:after { 
 
    content: ""; 
 
    width: 100%; 
 
    display: inline-block; 
 
} 
 

 
.how2{ 
 
    background-color: #white; 
 
    background-size: cover; 
 
    max-width: 250px; 
 
    min-width: 135px; 
 
    color: gold; 
 
}

<div class="menubar1"> 
 
    <div class="how2" style="cursor: pointer;" 
 
    onclick="window.location='http://somepage.com';">Title</div> 
 
    <div class="how2" style="cursor: pointer;" 
 
    onclick="window.location='http://somepage.com';">Title</div> 
 
    <div class="how2" style="cursor: pointer;" 
 
    onclick="window.location='http://somepage.com';">Title</div> 
 
    <div class="how2" style="cursor: pointer;" 
 
    onclick="window.location='http://somepage.com';">Title</div> 
 
</div>

Quelle

2017-12-21 13:35:34

Wenn Sie ein div zentrieren möchten, können Sie margin: 0 auto;

Beispiel:

divToCenter{ 
     margin: 0 auto; 
}

Weitere Informationen here

Quelle

2017-12-21 13:34:23

Hinweis op will mehrere divs in einem Elternteil div zentriert. Dies funktioniert nur, wenn ein div zentriert wird. –

ich sehr empfehlen mehr über CSS Flexbox lernen. Es ist Browser-freundlich und wird Ihnen in Zukunft das Erstellen flüssiger Layouts erleichtern.

In dem von mir bereitgestellten Beispiel wird die flex -Eigenschaft auf den übergeordneten Container angewendet, der die divs enthält, die zentriert werden müssen. Justify-content:center zentriert sie horizontal und align-items:center richtet sie vertikal aus. Es gibt viele verschiedene Möglichkeiten, das Layout zu steuern und Sie können hier mehr über sie erfahren: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent{ 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
    width:100%; 
 
} 
 

 
.child{ 
 
    flex: 0 0 20%; 
 
    margin:.5em; 
 
    background-color:black; 
 
    color:white; 
 
    text-align:center; 
 
}

<div class="parent"> 
 
    <div class="child">1</div> 
 
    <div class="child">2</div> 
 
    <div class="child">3</div> 
 
    <div class="child">4</div> 
 
</div><!--parent -->

Quelle

2017-12-21 13:50:38 jeh

Textausrichtung: Mitte; geholfen, aber ich sah Ihren Link, es ist sehr interessant, und ich muss wirklich über Flexbox lernen. Danke für deine Antwort ! :) –

Es hat meinen Workflow über das letzte Jahr komplett verändert und ich habe 'float' seitdem nicht benutzt, lol. Ich pumpere Webseiten jetzt viel schneller. Glückliche Codierung !!! :) – jeh

Erste nicht Position CSS-Eigenschaft auf Ihrer CSS-Datei verwenden:

Sie muss den Standardwert für die Position angeben. Dann müssen Sie den Code ändern wie diese

<style> 
.menubar1{ 
    background: #ffffff00; 
    width:50%; 
    max-width:95%; 
    height: 70px; 
    margin:0 auto; 
    } 
.menubar1>div{ 
    width: 10%; 
    display: inline-block; 
    vertical-align: top; 
    height: 45%; 
    zoom: 1; 
    background-position: center; 
    text-align: center; 
    font-size: 23px; 
    padding-top: 10px; 
    font-family: cursive;   
    font-weight: 600; 
    margin-top: 5px; 
} 
.menubar1:after { 
    content: ""; 
    width: 100%; 
    display: inline-block; 
} 

.how2{ 
    background-color: #white; 
    background-size: cover; 
    max-width: 250px; 
    min-width: 135px; 
    color: gold; 
} 
</style> 

<div class="menubar1"> 
    <div class="how2" style="cursor: pointer;" 
    onclick="window.location='http://somepage.com';">Title</div> 
    <div class="how2" style="cursor: pointer;" 
    onclick="window.location='http://somepage.com';">Title</div> 
    <div class="how2" style="cursor: pointer;" 
    onclick="window.location='http://somepage.com';">Title</div> 
    <div class="how2" style="cursor: pointer;" 
    onclick="window.location='http://somepage.com';">Title</div>

hier i Code geändert. Hoffe ich denke du erwartest so. Meine Ausgabe ist

Quelle

2017-12-21 13:51:06

Ich mag deinen Code fühlte könnte von effizienter gewesen, vielleicht bin ich nicht, das große Bild zu sehen, aber der Code unten funktioniert viel besser:

body {margin:0;} 
 

 
    .maxScreenSize {margin: 0 auto;max-width: 1280px} /* you dont usually want your menu expanding for ever, this puts a limit on how far the menu will extend, change 1280px to which ever screen size you think will for best for this element */ 
 
    
 
    .topnav-containter { 
 
    background-color: #777; /* This is grey for testing, you can change it back to white if you like*/ 
 
    border-top-right-radius: 50px; 
 
    border-top-left-radius: 50px; 
 
    padding-left: 50px; /* Added so that hover effect doesn't appear on the curves */ 
 
    padding-right: 50px; /* Added so that hover effect doesn't appear on the curves */ 
 
    margin-top: 10px; /* I dropped the %5 because I think fruther along in your web build (maybe the responsiveness stage) the percentage here wont make sense. */ 
 
    } 
 
    
 
    .topnav { 
 
    overflow: hidden; 
 
    font-size: 23px; 
 
    font-family: cursive;   
 
    font-weight: 600; 
 

 
    } 
 

 
    .topnav a { 
 
    float: left; 
 
    width: 20%; /* 5 buttons, so 100/5 = 20 */ 
 
    color: gold; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    padding: 16px 0; /* Padding for top and bottom only, left and right will cause the buttons to not fit evenly across */ 
 
    } 
 
    
 
    /* Drop this if you dont want a hover effect */ 
 
    .topnav a:hover { 
 
    background-color: #eee; 
 
    color: black; 
 
    }

<div class="maxScreenSize"> 
 
    <div class="topnav-containter"> 
 
     <div class="topnav"> 
 
     <a href="#">Title</a> 
 
     <a href="#">Title</a> 
 
     <a href="#">Title</a> 
 
     <a href="#">Title</a> 
 
     <a href="#">Title</a> 
 
     </div> 
 
    </div> 
 
    </div>

Quelle

2017-12-21 18:41:15

Wie man diese wenigen divs innerhalb div

Antwort

Verwandte Themen