Pertanyaan mengatur semua li bersarang menjadi lebar li terluas


Bagaimana cara membuat nested li memiliki lebar yang sama?

Ketika saya menggunakan kode di bawah ini, setiap li bersarang hanya selebar teks + margin.

Saya ingin semua li menjadi seluas li terluas di bawah ul induk.

misalnya:

<ul id="menu">
    <li <a href="#" title="Menu a">Menu a</a></li>
    <li <a href="#" title="Menu b">Menu b</a></li>
    <li <a href="#" title="Nested Menu">Nested Menu</a>
        <ul>
            <li <a href="#" title="Menu Item">Menu Item</li>
            <li <a href="#" title="Long Menu Item">Long Menu Item</a></li>
            <li <a href="#" title="Longer Menu Item">Longer Menu Item</a></li>
        </ul>
    </li>
    <li <a href="#" title="Menu z">Menu z</a></li>
</ul>

dengan css:

<style type="text/css" media="all">
* {
    padding:0; 
    margin:0;
}
body, html {
    width: 100%;
    height: 100%;
}
#wrapper {
    width: 800px;
    height: 100%;
    margin: auto;
}
#menu {
    margin: 0 0 0 8px; 
    padding: 0;
    font-size: 14px; 
    font-weight: normal;
}

#menu ul {
    list-style-type:none; 
    list-style-position:outside; 
    position:relative; 
    z-index:300; 
    height: 32px;
    font-weight:bold; 
    white-space: nowrap;
    padding:0;
} 
#menu a {text-decoration:none; 
    line-height: 32px;
} 
#menu a:hover {

} 
#menu li {
    float:left; 
    position:relative; 
    display: inline; 
    height: 100%; 
    list-style-type: none; 
    padding: 0 20px;
    background: #ccc;
} 
#menu ul {
    position:absolute; 
    display:none; 
    left:0px;
    background: #BDCCD4;
    width:100%;
} 
#menu ul a, #menu li a {
    display: block;
}
#menu li ul {
    background: #BDCCD4;
    display:block;
}
#menu li ul a {
    font-weight: normal;
    height:auto; 
    float:left;
} 
#menu ul ul {
    padding: 0 9px;
    display:block;
} 
#menu li ul li {
    padding: 0 9px;
    background: #BDCCD4;
}
#menu li:hover {
    background: #ddd;
    height: 32px;
}
#menu li li:hover, #menu li li li:hover {
    background: #ddd;
    height: 32px;
}
#menu li a:link, #menu li a:visited {
    text-decoration: none;
    color: #003E7E;
    margin: auto;
}


5
2018-06-15 12:40


asal


Jawaban:


Untuk membuat semua daftar item dengan panjang yang sama dengan yang terpanjang, Anda perlu mengatur lebar secara manual. Tidak ada metode CSS murni untuk mencapai hal ini secara otomatis sejauh yang saya tahu.

li {width: 100%} Akan membuat daftar item mengisi lebar wadahnya. Jika itu tidak diatur, maka akan menjadi lebar jendela browser pengguna.


1
2018-06-15 13:09



Cukup tambahkan width: 100% untuk #menu li ul li bekerja untukku. Agar dapat berfungsi untuk item yang lebih panjang, gunakan width: auto di #menu li ul. EDIT 2: Menambahkan solusi padding.

CSS baru:

<style type="text/css" media="all">
* {
    padding:0;
    margin:0;
}
body, html {
    width: 100%;
    height: 100%;
}
#wrapper {
    width: 800px;
    height: 100%;
    margin: auto;
}
#menu {
    margin: 0 0 0 8px;
    padding: 0;
    font-size: 14px;
    font-weight: normal;
}

#menu ul {
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    z-index:300;
    height: 32px;
    font-weight:bold;
    white-space: nowrap;
    padding:0;
}
#menu a {text-decoration:none;
    line-height: 32px;
}
#menu a:hover {

}
#menu li {
    float:left;
    position:relative;
    display: inline;
    height: 100%;
    list-style-type: none;
    padding: 0 20px;
    background: #ccc;
}
#menu ul {
    position:absolute;
    display:none;
    left:0px;
    background: #BDCCD4;
    width:100%;
}
#menu ul a, #menu li a {
    display: block;
}
#menu li ul {
    background: #BDCCD4;
    display:block;
    width: auto;
}
#menu li ul a {
    font-weight: normal;
    height:auto;
    float:left;
}
#menu ul ul {
    padding: 0 0 0 9px;
    display:block;
}
#menu li ul li {
    padding: 0 9px;
    background: #BDCCD4;
    width: 100%;
}
#menu li:hover {
    background: #ddd;
    height: 32px;
}
#menu li li:hover, #menu li li li:hover {
    background: #ddd;
    height: 32px;
}
#menu li a:link, #menu li a:visited {
    text-decoration: none;
    color: #003E7E;
    margin: auto;
}

Hasilnya ada di sini: http://jsfiddle.net/y83zm/2/ EDIT 2 Memperbaiki ditambahkan untuk memecahkan masalah padding aneh, lihat http://jsfiddle.net/y83zm/5/


3
2018-06-15 12:44



Anda harus menggunakan JavaScript untuk mengatur semuanya LIs lebar sama dengan yang terluas LI. Berikut kode jika Anda ingin menggunakan pustaka jQuery:

$(document).ready(function(){
  $("#menu > li > ul").each(function() { // Loop through all the menu items that got submenu items
    var Widest=0; // We want to find the widest LI... start at zero
    var ThisWidth=0; // Initiate the temporary width variable (it will hold the width as an integer)

    $($(this).children()).each(function() { // Loop through all the children LIs in order to find the widest
      ThisWidth=parseInt($(this).css('width')); // Grab the width of the current LI

      if (ThisWidth>Widest) { // Is this LI the widest?
        Widest=ThisWidth; // We got a new widest value
      }
    });

    Widest+='px'; // Add the unit

    $(this).parent().css('width',Widest);
    $(this).children().css('width',Widest);
  });
});

Perubahan CSS:

#menu li ul li {
  padding: 0 9px;
  background: #BDCCD4;
  padding: 0 20px;
}

Lihatlah JSFiddle.

Edit: Memperbaiki kesalahpahaman saya. :)


2
2018-06-15 13:26



Akan ada solusi dinamis yang sangat sederhana. Untuk CSS Anda, saat Anda mempostingnya di Pertanyaan, cukup tambahkan

#menu ul {
    display: inline-block;
    min-width: 100px;
}

#menu ul li, #menu ul li a{
    width: 100%;
    display:block;
}

dan kemudian akan persis seperti yang Anda inginkan.

Anda dapat melihat tampilannya di sini: http://jsfiddle.net/ramsesoriginal/y83zm/61/


2
2018-02-17 10:09



Solusi jQuery sederhana bekerja untuk saya:

$(document).ready(function(){
    $('.sub-menu').each(function(){
        $(this).width(2000);
        var width = 0;
        $(this).children('li').each(function(){
            if ($(this).children('a').width() > width)
                width = $(this).children('a').width();
        });
        $(this).width(width);
    });
});

0
2017-07-08 15:29



Saya menggunakan berikut CoffeeScript untuk mencapai perilaku yang dijelaskan:

$ ->
    menu_toggle = (e, show) ->
        ul = $(e).find('ul')
        ul.toggle()

        computed = ul.hasClass 'computed_width'
        if show && !computed
            ul.width 2000 # enormous with to be sure that li’s’ texts are not wrapped
            max_width = 0
            ul.find('li').each ->
                li = $(this)
                width = li.width()
                max_width = width if width > max_width
            ul.width max_width + 30 if max_width # 20 is 2 * padding + some reserve
            ul.toggleClass 'computed_width' # no need to compute every time

    $('li').has('ul').hover ->
        menu_toggle this, true
    , ->
        menu_toggle this, false

-1
2018-04-02 17:15