Bedeutet <div> Ursache Zeilenumbrüche?

Ich habe eine Menüleiste und erstellen Sie ein div für jeden Menüpunkt, so dass Sie getrennt horizontal von 5px. Wie mache ich das?

Scheint es, dass durch einfaches umwickeln ein Objekt um einen div, der automatisch bewirkt, dass jeder Menüpunkt, um auf eine neue Zeile.

InformationsquelleAutor alamodey | 2009-05-18

  1. 27

    divs sind block-Elemente standardmäßig. Sie können dies ändern in CSS

     display:inline

    aber könnten Sie besser dran, mit einer Liste und CSS zu erreichen, was Sie wollen.

    <style>
   .mymenu{
      list-style:none; 
   }
   .mymenu li{
      display:inline;
      etc
   }
</style>
<ul class="mymenu">
    <li>Item</li>
    <li>Item</li>
</ul>
    +1 immer gern <ul> für Menüs, Sie sehen gut aus, auch wenn die Stile nicht anwenden
    <ul><li>... - Ansatz verwendet, indem Sie jQuery und javascript Bibliotheken / plugins für die Menüs.

    InformationsquelleAutor Vincent Ramdhanie

  2. 7

    Standardmäßig <DIV> bewirkt, dass ein Zeilenumbruch.

    Sie wollen wahrscheinlich verwenden Sie ein <SPAN>.

    InformationsquelleAutor Dave Webb

  3. 2

    <span> ist, was Sie suchen

    Besonders für Menüs haben Sie vielleicht einen Blick auf suckerfish dropdown Menüs

    ...das display: block, widersprechen Sie komplett...

    InformationsquelleAutor Xn0vv3r

  4. 1

    Könnten Sie schweben, aber für die Menü-Elemente, es ist weit mehr gemeinsame Listen verwenden, um diese zu erstellen.

    InformationsquelleAutor cgp

  5. 1
    display: inline;

    InformationsquelleAutor Sake

  6. 0

    <div> display: block - in der Regel bildet es einen Kasten um Ihre Inhalte und Sie bekommen so etwas wie einen Zeilenumbruch nach es (obwohl es nicht einen Zeilenumbruch, genau, weil 'div' - und 'line' sind keine Begriffe, die zusammen gehen). <span> ist display: inline, was bedeutet, dass Ihr Inhalt floss (z.B. verpackt) in einem Absatz, wie ein Fett oder Kursiv hervorheben. Es schadet auch nicht, nehme immer eine Kastenform: Stell dir vor, 

    This is a paragraph and <span> this is a
highlighted section.</span>

    welche braucht zwei Felder zu beschreiben, die enthaltenen inline-Elemente (Grenzen setzen, um zu sehen, wie es aussieht).

    Werden Sie wahrscheinlich wollen, verwenden Sie block-Elemente für Menüs, da die box-sizing macht es einfacher, auch die Höhe (und Optional die Breite) der Menü-Elemente - inline-Elemente können lassen Sie mit Variablen Höhen und breiten, die - vereinfacht die situation erheblich.

    Mit block-Elemente, verwenden Sie float: left zu machen, Sie line-up nebeneinander.

    Aber es gibt so viele Komplikationen und Meinungen zu diesem Thema, Sie wären besser dran, die Erforschung der situation mehr gründlich - ich empfehle http://www.alistapart.com/ für Vorspeisen, die mehrere gearbeitet Menü-Beispiele.

    InformationsquelleAutor ijw

  7. -1

    wenn Sie Spanne, die Sie nicht verwenden können, die Ränder oben und unten und Ihre Menüpunkte verteilt-Linien (sehr hässlich, wenn Sie haben auch eine Grenze). Ich empfehle schwebte block A-tags, die kompakt und funktioniert gut mit text-mode Browser.

    <style>
#menu a {display: block; border: 1px solid blue; padding 5px; float: left; margin-right: 5px;}
</style>
<div id="menu">
  <a href="/1/">Item 1</a> <a href="/2/">Item 2</a>
  <div style="clear:left"></div>
</div>

    InformationsquelleAutor SpliFF

  8. -3

    Ja, es funktioniert in der Regel. Versuchen <span>

    InformationsquelleAutor pjc50

Schreibe einen Kommentar