ฉันจะ * ปรับเมนูแนวนอนใน HTML + CSS ได้อย่างไร

Question 1

คุณพบบทเรียนมากมายบนแถบเมนูใน HTML แต่สำหรับกรณีเฉพาะนี้ (แม้ว่า IMHO ทั่วไป) ฉันไม่พบวิธีแก้ปัญหาที่เหมาะสม:

#  THE MENU ITEMS    SHOULD BE    JUSTIFIED     JUST AS    PLAIN TEXT     WOULD BE  #
#  ^                                                                             ^  #

รายการเมนูแบบข้อความเท่านั้นมีจำนวนแตกต่างกันไปและเค้าโครงหน้าเว็บก็ลื่นไหล
รายการเมนูแรกควรจัดชิดซ้ายรายการเมนูสุดท้ายควรจัดชิดขวา
รายการที่เหลือควรกระจายอย่างเหมาะสมที่สุดบนแถบเมนู
จำนวนจะแตกต่างกันดังนั้นจึงไม่มีโอกาสคำนวณความกว้างที่เหมาะสมล่วงหน้า

โปรดทราบว่า TABLE จะไม่ทำงานที่นี่เช่นกัน:

หากคุณอยู่กึ่งกลาง TD ทั้งหมดรายการแรกและรายการสุดท้ายจะไม่ถูกจัดเรียงอย่างถูกต้อง
ถ้าคุณจัดชิดซ้ายและจัดชิดขวาของการตอบสนองแรก รายการสุดท้ายระยะห่างจะไม่เหมาะสม

ไม่แปลกที่ไม่มีวิธีที่ชัดเจนในการนำสิ่งนี้ไปใช้อย่างสะอาดตาโดยใช้ HTML และ CSS?

Question 2

แนวทางสมัยใหม่ - Flexboxes !

ตอนนี้ที่flexboxes CSS3มีการสนับสนุนเบราว์เซอร์ที่ดีกว่าบางส่วนของเราจนสามารถเริ่มใช้พวกเขา เพียงแค่เพิ่มคำนำหน้าผู้จัดจำหน่ายเพิ่มเติมสำหรับความคุ้มครองเบราว์เซอร์อื่น ๆ

ในกรณีนี้คุณก็จะตั้งขององค์ประกอบหลักdisplayที่จะflexแล้วเปลี่ยนjustify-contentคุณสมบัติอย่างใดอย่างหนึ่งspace-betweenหรือspace-aroundเพื่อเพิ่มช่องว่างระหว่างหรือรอบ ๆ เด็ก flexbox รายการ

การใช้justify-content: space-between - ( ตัวอย่างที่นี่) :

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-between;
}

<ul class="menu">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three Longer</li>
    <li>Item Four</li>
</ul>

ขยายข้อมูลโค้ด

การใช้justify-content: space-around - (ตัวอย่างที่นี่) :

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-around;
}

<ul class="menu">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three Longer</li>
    <li>Item Four</li>
</ul>

ขยายข้อมูลโค้ด

Question 3

สิ่งที่ง่ายที่สุดที่ต้องทำคือบังคับให้เส้นแบ่งโดยการแทรกองค์ประกอบที่ท้ายบรรทัดซึ่งจะใช้พื้นที่มากกว่าพื้นที่ว่างด้านซ้ายแล้วซ่อนไว้ ฉันทำสิ่งนี้ได้ค่อนข้างง่ายด้วยspanองค์ประกอบง่ายๆเช่นนี้:

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

<div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>
  <span></span>
</div>

ขยายข้อมูลโค้ด

ขยะทั้งหมดที่อยู่ใน#menu spanตัวเลือกนั้น (เท่าที่ฉันพบ) จำเป็นเพื่อให้เบราว์เซอร์ส่วนใหญ่พอใจ ควรบังคับให้ความกว้างของspanองค์ประกอบเป็น 100% ซึ่งจะทำให้เกิดการแตกบรรทัดเนื่องจากถือว่าเป็นองค์ประกอบแบบอินไลน์เนื่องจากdisplay: inline-blockกฎ inline-blockยังทำให้spanกฎสไตล์ระดับบล็อกเป็นไปได้widthซึ่งทำให้องค์ประกอบไม่สอดคล้องกับเมนูและทำให้เมนูขึ้นบรรทัดใหม่

แน่นอนว่าคุณต้องปรับความกว้างของกล่องspanใช้งานและการออกแบบของคุณ แต่ฉันหวังว่าคุณจะได้รับแนวคิดทั่วไปและสามารถปรับใช้ได้

Question 4

ตกลงวิธีนี้ใช้ไม่ได้กับ IE6 / 7 เนื่องจากไม่มีการรองรับ:before/ :afterแต่:

ul {
  text-align: justify;
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}
ul:after {
  content: "";
  margin-left: 100%;
}
li {
  display: inline;
}
a {
  display: inline-block;
}

<div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
  </ul>
</div>

ขยายข้อมูลโค้ด

เหตุผลที่ฉันมีแท็กเป็นinline-blockเพราะฉันไม่ต้องการให้คำที่อยู่ในนั้นถูกต้องเช่นกันและฉันก็ไม่ต้องการใช้ช่องว่างที่ไม่ทำลายด้วยเช่นกัน

Question 5

มีวิธีแก้ปัญหา ทำงานใน FF, IE6, IE7, Webkit ฯลฯ

ตรวจสอบให้แน่ใจว่าคุณไม่ได้เว้นวรรคก่อนปิดไฟล์span.inner. IE6 จะพัง

คุณสามารถ.outerระบุความกว้างได้

.outer {
  text-align: justify;
}
.outer span.finish {
  display: inline-block;
  width: 100%;
}
.outer span.inner {
  display: inline-block;
  white-space: nowrap;
}

<div class="outer">
  <span class="inner">THE MENU ITEMS</span>
  <span class="inner">SHOULD BE</span>
  <span class="inner">JUSTIFIED</span>
  <span class="inner">JUST AS</span>
  <span class="inner">PLAIN TEXT</span>
  <span class="inner">WOULD BE</span>
  <span class="finish"></span>
</div>

ขยายข้อมูลโค้ด

Question 6

ทำงานร่วมกับ Opera, Firefox, Chrome และ IE

ul {
   display: table;
   margin: 1em auto 0;
   padding: 0;
   text-align: center;
   width: 90%;
}

li {
   display: table-cell;
   border: 1px solid black;
   padding: 0 5px;
}

Question 7

อีกวิธีหนึ่ง ฉันไม่มีตัวเลือกในการจัดการ html เช่นการเพิ่มคลาสที่แตกต่างเป็นต้นดังนั้นฉันจึงพบวิธี css ที่บริสุทธิ์

ทำงานใน Chrome, Firefox, Safari .. ไม่รู้เกี่ยวกับ IE

ทดสอบ: http://jsfiddle.net/c2crP/1

ul {
  margin: 0; 
  padding: 0; 
  list-style: none; 
  width: 200px; 
  text-align: justify; 
  list-style-type: none;
}
ul > li {
  display: inline; 
  text-align: justify; 
}

/* declaration below will add a whitespace after every li. This is for one line codes where no whitespace (of breaks) are present and the browser wouldn't know where to make a break. */
ul > li:after {
  content: ' '; 
  display: inline;
}

/* notice the 'inline-block'! Otherwise won't work for webkit which puts after pseudo el inside of it's parent instead of after thus shifting also the parent on next line! */
ul > li:last-child:after {
  display: inline-block;
  margin-left: 100%; 
  content: ' ';
}

<ul>
  <li><a href="#">home</a></li>
  <li><a href="#">exposities</a></li>
  <li><a href="#">werk</a></li>
  <li><a href="#">statement</a></li>
  <li><a href="#">contact</a></li>
</ul>

ขยายข้อมูลโค้ด

Question 8

ทำให้<p>ด้วยtext-align: justify?

อัปเดต : ไม่เป็นไร มันไม่ได้ผลอย่างที่ฉันคิด

อัปเดต 2 : ไม่สามารถใช้งานได้ในเบราว์เซอร์อื่น ๆ นอกเหนือจาก IE ในขณะนี้ แต่ CSS3 รองรับสิ่งนี้ในรูปแบบของไฟล์text-align-last

Question 9

สำหรับเบราว์เซอร์ที่ใช้ Gecko ฉันคิดวิธีแก้ปัญหานี้ขึ้นมา โซลูชันนี้ใช้ไม่ได้กับเบราว์เซอร์ WebKit (เช่น Chromium, Midori, Epiphany) แต่ยังคงแสดงช่องว่างต่อท้ายรายการสุดท้าย

ฉันใส่แถบเมนูในวรรคธรรม ปัญหาคือบรรทัดสุดท้ายของย่อหน้าที่ถูกต้องจะไม่ถูกแสดงผลด้วยเหตุผลที่ชัดเจน ดังนั้นฉันจึงเพิ่มองค์ประกอบที่มองไม่เห็นกว้าง ๆ (เช่น img) ซึ่งรับประกันว่าย่อหน้ามีความยาวอย่างน้อยสองบรรทัด

ตอนนี้แถบเมนูได้รับการพิสูจน์แล้วโดยอัลกอริทึมเดียวกับที่เบราว์เซอร์ใช้สำหรับปรับข้อความธรรมดา

รหัส:

<div style="width:500px; background:#eee;">
 <p style="text-align:justify">
  <a href="#">THE&nbsp;MENU&nbsp;ITEMS</a>
  <a href="#">SHOULD&nbsp;BE</a>
  <a href="#">JUSTIFIED</a>
  <a href="#">JUST&nbsp;AS</a>
  <a href="#">PLAIN&nbsp;TEXT</a>
  <a href="#">WOULD&nbsp;BE</a>
  <img src="/Content/Img/stackoverflow-logo-250.png" width="400" height="0"/>
 </p>
 <p>There's an varying number of text-only menu items and the page layout is fluid.</p>
 <p>The first menu item should be left-aligned, the last menu item should be right-aligned. The remaining items should be spread optimal on the menu bar.</p>
 <p>The number is varying,so there's no chance to pre-calculate the optimal widths.</p>
 <p>Note that a TABLE won't work here as well:</p>
 <ul>
  <li>If you center all TDs, the first and the last item aren't aligned correctly.</li>
  <li>If you left-align and right-align the first resp. the last items, the spacing will be sub-optimal.</li>
 </ul>
</div>

หมายเหตุ: สังเกตไหมว่าฉันโกง? ในการเพิ่มองค์ประกอบเติมช่องว่างฉันต้องเดาเกี่ยวกับความกว้างของแถบเมนู ดังนั้นการแก้ปัญหานี้จึงไม่เป็นไปตามกฎอย่างสมบูรณ์

Question 10

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

CSS:

ul {
  text-align: justify;
  width: 400px;
  margin: 0;
  padding: 0;
  height: 1.2em;
  /* forces the height of the ul to one line */
  overflow: hidden;
  /* enforces the single line height */
  list-style-type: none;
  background-color: yellow;
}

ul li {
  display: inline;
}

ul li.break {
  margin-left: 100%;
  /* use e.g. 1000px if your ul has no width */
}

HTML:

<ul>
  <li><a href="/">The</a></li>
  <li><a href="/">quick</a></li>
  <li><a href="/">brown</a></li>
  <li><a href="/">fox</a></li>
  <li class="break">&nbsp;</li>
</ul>

องค์ประกอบ li.break ต้องอยู่ในบรรทัดเดียวกับรายการเมนูสุดท้ายและต้องมีเนื้อหาบางส่วน (ในกรณีนี้คือช่องว่างที่ไม่ทำลาย) มิฉะนั้นในบางเบราว์เซอร์หากไม่อยู่ในบรรทัดเดียวกันคุณจะเห็นบางส่วนเล็ก ๆ ช่องว่างเพิ่มเติมที่ท้ายบรรทัดของคุณและหากไม่มีเนื้อหาก็จะถูกละเว้นและบรรทัดนั้นไม่ถูกต้อง

ทดสอบใน IE7, IE8, IE9, Chrome, Firefox 4

Question 11

ถ้าจะไปกับจาวาสคริปต์ที่เป็นไปได้ (สคริปต์นี้อ้างอิงจาก mootools)

<script type="text/javascript">//<![CDATA[
    window.addEvent('load', function(){
        var mncontainer = $('main-menu');
        var mncw = mncontainer.getSize().size.x;
        var mnul = mncontainer.getFirst();//UL
        var mnuw = mnul.getSize().size.x;
        var wdif = mncw - mnuw;
        var list = mnul.getChildren(); //get all list items
        //get the remained width (which can be positive or negative)
        //and devided by number of list item and also take out the precision
        var liwd = Math.floor(wdif/list.length);
        var selw, mwd=mncw, tliw=0;
        list.each(function(el){
            var elw = el.getSize().size.x;
            if(elw < mwd){ mwd = elw; selw = el;}
            el.setStyle('width', elw+liwd);
            tliw += el.getSize().size.x;
        });
        var rwidth = mncw-tliw;//get the remain width and set it to item which has smallest width
        if(rwidth>0){
            elw = selw.getSize().size.x;
            selw.setStyle('width', elw+rwidth);
        }
    });
    //]]>
</script>

และ css

<style type="text/css">
    #main-menu{
        padding-top:41px;
        width:100%;
        overflow:hidden;
        position:relative;
    }
    ul.menu_tab{
        padding-top:1px;
        height:38px;
        clear:left;
        float:left;
        list-style:none;
        margin:0;
        padding:0;
        position:relative;
        left:50%;
        text-align:center;
    }
    ul.menu_tab li{
        display:block;
        float:left;
        list-style:none;
        margin:0;
        padding:0;
        position:relative;
        right:50%;
    }
    ul.menu_tab li.item7{
        margin-right:0;
    }
    ul.menu_tab li a, ul.menu_tab li a:visited{
        display:block;
        color:#006A71;
        font-weight:700;
        text-decoration:none;
        padding:0 0 0 10px;
    }
    ul.menu_tab li a span{
        display:block;
        padding:12px 10px 8px 0;
    }
    ul.menu_tab li.active a, ul.menu_tab li a:hover{
        background:url("../images/bg-menutab.gif") repeat-x left top;
        color:#999999;
    }
    ul.menu_tab li.active a span,ul.menu_tab li.active a.visited span, ul.menu_tab li a:hover span{
        background:url("../images/bg-menutab.gif") repeat-x right top;
        color:#999999;
    }
</style>

และ html สุดท้าย

<div id="main-menu">
    <ul class="menu_tab">
        <li class="item1"><a href="#"><span>Home</span></a></li>
        <li class="item2"><a href="#"><span>The Project</span></a></li>
        <li class="item3"><a href="#"><span>About Grants</span></a></li>
        <li class="item4"><a href="#"><span>Partners</span></a></li>
        <li class="item5"><a href="#"><span>Resources</span></a></li>
        <li class="item6"><a href="#"><span>News</span></a></li>
        <li class="item7"><a href="#"><span>Contact</span></a></li>
    </ul>
</div>

Question 12

มาร์กอัปที่เรียบง่ายกว่าทดสอบใน Opera, FF, Chrome, IE7, IE8:

<div class="nav">
  <a href="#" class="nav_item">nav item1</a>
  <a href="#" class="nav_item">nav item2</a>
  <a href="#" class="nav_item">nav item3</a>
  <a href="#" class="nav_item">nav item4</a>
  <a href="#" class="nav_item">nav item5</a>
  <a href="#" class="nav_item">nav item6</a>
  <span class="empty"></span>
</div>

และ css:

.nav {
  width: 500px;
  height: 1em;
  line-height: 1em;
  text-align: justify;
  overflow: hidden;
  border: 1px dotted gray;
}
.nav_item {
  display: inline-block;
}
.empty {
  display: inline-block;
  width: 100%;
  height: 0;
}

ตัวอย่างสด

Question 13

สิ่งนี้สามารถทำได้อย่างสมบูรณ์แบบโดยการวัดอย่างรอบคอบและตัวเลือกลูกคนสุดท้าย

ul li {
margin-right:20px;
}
ul li:last-child {
margin-right:0;
}

Question 14

ฉันรู้ว่าคำถามเดิมระบุ HTML + CSS แต่ไม่ได้บอกว่าไม่มีจาวาสคริปต์โดยเฉพาะ ;)

พยายามรักษา css และมาร์กอัปให้สะอาดที่สุดเท่าที่จะเป็นไปได้และมีความหมายตามความหมายมากที่สุดเท่าที่จะทำได้ (โดยใช้ UL สำหรับเมนู) ฉันได้รับคำแนะนำนี้ อาจไม่เหมาะ แต่อาจเป็นจุดเริ่มต้นที่ดี:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>
        <title>Kind-of-justified horizontal menu</title>

        <style type="text/css">
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        ul li {
            display: block;
            float: left;
            text-align: center;
        }
        </style>

        <script type="text/javascript">
            setMenu = function() {
                var items = document.getElementById("nav").getElementsByTagName("li");
                var newwidth = 100 / items.length;

                for(var i = 0; i < items.length; i++) {
                    items[i].style.width = newwidth + "%";
                }
            }
        </script>

    </head>

    <body>

        <ul id="nav">
            <li><a href="#">first item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
            <li><a href="#">last item</a></li>
        </ul>

        <script type="text/javascript">
            setMenu();
        </script>

    </body>

</html>