ฉันจะจัดแนวเมนู <UL> ในแนวนอนได้อย่างไร

ฉันต้องจัดกึ่งกลางเมนูแนวนอน
ฉันได้ลองวิธีแก้ปัญหาต่าง ๆ รวมถึงการผสมผสานของinline-block/ block/ center-alignฯลฯ แต่ยังไม่ประสบความสำเร็จ

นี่คือรหัสของฉัน:

<div class="topmenu-design">
    <!-- Top menu content: START -->
    <ul id="topmenu firstlevel">                                                                                       
      <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
      <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
      <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
    </ul>
    <!-- Top menu content: END -->
</div>

UPDATE

ฉันรู้วิธีการศูนย์จัดภายในul divสามารถทำได้โดยใช้คำแนะนำของ Sarfraz ulแต่รายการที่มีการลอยยังเหลือภายใน

ฉันต้องใช้ Javascript หรือไม่

จากhttp://pmob.co.uk/pob/centred-float.htm :

หลักฐานเป็นเรื่องง่ายและโดยทั่วไปเกี่ยวข้องกับเสื้อคลุมลอยไร้ความกว้างที่ลอยไปทางซ้ายแล้วเลื่อนหน้าจอออกไปที่ตำแหน่งความกว้างด้านซ้าย: สัมพัทธ์; ซ้าย: -50% ถัดไปองค์ประกอบภายในที่ซ้อนกันจะถูกกลับรายการและใช้ตำแหน่งที่สัมพันธ์กับ + 50% นี่คือผลของการวางองค์ประกอบตายในศูนย์ การวางตำแหน่งสัมพัทธ์รักษาอัตราการไหลและอนุญาตให้เนื้อหาอื่นไหลอยู่ด้านล่าง

รหัส

#buttons{
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
#buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}

#buttons li{float:left;position:relative;}/* ie needs position:relative here*/

#buttons a{
    text-decoration:none;
    margin:10px;
    background:red;
    float:left;
    border:2px outset blue;
    color:#fff;
    padding:2px 5px;
    text-align:center;
    white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/

<div id="buttons">
    <ul>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2's a bit longer</a></li>
        <li><a href="#">Butt 3</a></li>
        <li><a href="#">Button 4</a></li>
    </ul>
</div>

มันใช้งานได้สำหรับฉัน หากฉันไม่เข้าใจผิดคำถามของคุณคุณอาจลองดู

    div#centerDiv {
        width: 100%;
        text-align: center;
        border: 1px solid red;
    }
    ul.centerUL {
        margin: 2px auto;
        line-height: 1.4;
        padding-left: 0;
    }
    .centerUL li {
        display: inline;
        text-align: center;
    }

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com">Amazon 1</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 2</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>

ด้วย CSS3 flexbox ง่าย

ul {
  display: flex;
  justify-content: center;
}

ul li {
  padding: 0 8px;
}

นี่เป็นวิธีที่ง่ายที่สุดที่ฉันพบ ฉันใช้ html ของคุณ การขยายเป็นเพียงเพื่อรีเซ็ตค่าเริ่มต้นของเบราว์เซอร์

ul {
  text-align: center;
  padding: 0;
}
li {
  display: inline-block;
}

<div class="topmenu-design">
  <!-- Top menu content: START -->
  <ul id="topmenu firstlevel">
    <li class="firstli" id="node_id_64">
      <div><a href="#"><span>Om kampanjen</span></a>
      </div>
    </li>
    <li id="node_id_65">
      <div><a href="#"><span>Fakta om inneklima</span></a>
      </div>
    </li>
    <li class="lastli" id="node_id_66">
      <div><a href="#"><span>Statistikk</span></a>
      </div>
    </li>
  </ul>
  <!-- Top menu content: END -->
</div>

นี่เป็นบทความที่ดีเกี่ยวกับวิธีการทำในลักษณะที่ค่อนข้างแข็งโดยไม่ต้องมีแฮ็คและรองรับเบราว์เซอร์เต็มรูปแบบ ใช้งานได้สำหรับฉัน:

-> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

ลองสิ่งนี้:

div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}

ทำเช่นนี้:

   <div id="footer">
        <ul>
            <li><a href="/1.html">Link 1</a></li>
            <li><a href="/2.html">Link 2</a></li>
            <li><a href="/3.html">Link 3</a></li>
            <li><a href="/4.html">Link 4</a></li>
            <li><a href="/5.html">Link 5</a></li>
        </ul>
   </div>

และ CSS:

#footer {
    background-color:#ccc;
    height:39px;
    line-height:36px;
    margin:0 auto;
    text-align:center;
    width:950px;
}

#footer ul li {
    display:inline;
    font-family:Arial,sans-serif;
    font-size:1em;
    padding:0 2px;
    text-decoration:none;
}

เช่นเดียวกับพวกคุณหลายคนฉันดิ้นรนกับสิ่งนี้มาระยะหนึ่งแล้ว วิธีการแก้ปัญหาในที่สุดเกี่ยวข้องกับ div ที่มี UL คำแนะนำทั้งหมดเกี่ยวกับการแก้ไขการขยายความกว้าง ฯลฯ ของ UL ไม่มีผล แต่สิ่งต่อไปนี้เกิดขึ้น

ทุกอย่างเกี่ยวกับmargin:0 auto;div ที่มีอยู่ ฉันหวังว่านี่จะช่วยให้บางคนและขอบคุณทุกคนที่แนะนำสิ่งนี้แล้วเมื่อรวมกับสิ่งอื่น ๆ

.divNav
{
    width: 99%;
    text-align:center;
    margin:0 auto; 
}

.divNav ul
{ 
    display:inline-block; 
    list-style:none;
    zoom: 1;
}

.divNav ul li 
{
    float:left;
    margin-right: .8em;       
    padding: 0; 
}

.divNav a,  #divNav a:visited
{
    width: 7.5em;
    display: block; 
    border: 1px solid #000;
    border-bottom:none;
    padding: 5px; 
    background-color:#F90;
    text-decoration: none;
    color:#FFF;
    text-align: center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:1em;
}

การสาธิต - http://codepen.io/grantex/pen/InLmJ

<div class="navigation">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Others</a></li>
    </ul>
</div>


.navigation {
    max-width: 700px;
    margin: 0 auto;
}
.navigation ul {
    list-style: none;
    display: table;
    width: 100%;
}
.navigation ul li {
    display: table-cell;
    text-align: center;
}
.navigation ul li a {
    padding: 5px 10px;
    width: 100%;
}

เจ้าทำความสะอาดมาก

โดยทั่วไปการพูดถึงวิธีการจัดองค์ประกอบระดับดำให้อยู่ตรงกลาง (เช่นก<ul>) ใช้margin:auto;คุณสมบัติ

text-align:center;การจัดข้อความชิดและองค์ประกอบระดับอินไลน์ภายในใช้องค์ประกอบระดับบล็อก ดังนั้นทุกอย่างเข้าด้วยกันเหมือน ...

ul {
    margin:auto;
}
ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

... ควรทำงาน.

กรณีที่ขอบเป็น Internet Explorer6 ... หรือแม้กระทั่ง IEs อื่น ๆ <!DOCTYPE>เมื่อไม่ได้ใช้ IE6 ไม่ถูกต้องสอดคล้อง elemnts text-alignระดับบล็อกใช้ ดังนั้นหากคุณต้องการสนับสนุน IE6 (หรือไม่ใช้<!DOCTYPE>) โซลูชันที่สมบูรณ์ของคุณคือ ...

div.topmenu-design {
    text-align:center;
}
div.topmenu-design ul {
    margin:auto;
}
div.topmenu-design ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

ในฐานะเชิงอรรถฉันคิดว่าid="topmenu firstlevel"ไม่ถูกต้องเนื่องจากidแอตทริบิวต์ไม่สามารถมีช่องว่าง ... ? อันที่จริงคำแนะนำ W3C กำหนดidแอตทริบิวต์เป็น'ชื่อ' ชนิด ...

โทเค็น ID และ NAME จะต้องเริ่มต้นด้วยตัวอักษร ([A-Za-z]) และอาจตามด้วยตัวอักษรตัวเลข ([0-9]), ยัติภังค์ ("-"), ขีดล่าง ("_") , colons (":") และเครื่องหมายมหัพภาค (".")

ฉันใช้จอแสดงผล: คุณสมบัติแบบอินไลน์บล็อก: การแก้ปัญหาประกอบด้วยการใช้กระดาษห่อที่มีความกว้างคงที่ ภายในบล็อก ul พร้อมบล็อกอินไลน์เพื่อแสดง เมื่อใช้สิ่งนี้ ul ใช้ความกว้างสำหรับเนื้อหาจริง! และสุดท้ายก็คือ: 0 อัตโนมัติเพื่อจัดวางอินไลน์บล็อกนี้ =)

/*ul wrapper*/
.gallery_wrapper{
        width:          958px;
        margin:         0 auto;
  }
/*ul list*/
ul.gallery_carrousel{
        display:        inline-block;
        margin:         0 auto;
}
.contenido_secundario li{
        float:          left;
}

ฉันใช้รหัส jquery สำหรับสิ่งนี้ (โซลูชันทางเลือก)

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });

div {
     text-align: center;
}
div ul {
     display: inline-table;
}

ul เป็นตารางแบบอินไลน์แก้ไขปัญหา ฉันใช้ div parent เพื่อจัดแนวข้อความให้อยู่กึ่งกลาง วิธีนี้ดูดีแม้ในภาษาอื่น (แปลความกว้างต่างกัน)

@ ทางออกของ Robusto นั้นง่ายที่สุดสำหรับสิ่งที่ฉันพยายามจะทำฉันขอแนะนำให้คุณใช้มัน ฉันพยายามทำสิ่งเดียวกันกับรูปภาพในรายการที่ไม่ได้เรียงลำดับเพื่อสร้างแกลเลอรี่ ... ฉันทำซอ js เพื่อหลอกไปรอบ ๆ รู้สึกอิสระที่จะลองที่นี่

[มันถูกตั้งค่าโดยใช้โค้ดตัวอย่างของโรบัสโต]
HTML:

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150>         </a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a></li>
    </ul>
</div>

CSS:

div#centerDiv {
    width: 700px;
    text-align: center;
    border: 1px solid red;
}
ul.centerUL {
    margin: 2px auto;
    line-height: 1.4;
}
.centerUL li {
    display: inline;
    text-align: center;
}

ul{margin-left:33%}

เป็นการประมาณที่เหมาะสมบนหน้าจอขนาดใหญ่ มันไม่ดี แต่การแก้ไขสกปรกดี

.topmenu-design
{
    display: inline-table;
}

นั่นคือทั้งหมด!