将ul的宽度设置为最宽的子宽度

Question

我有一个显示ul的小问题。我是CSS初学者。

我希望ul的宽度等于它所包含的最宽listitem。

我使用HTML如下：

<div id="sidebar">
    <ul id="sidebarSelector">
        <li><a href="#">Social Spot</a></li>
        <li><a href="#" class="selectedSidebarItem">Profile</a></li>
        <li><a href="#">Latest</a></li>
        <li><a href="#">Settings</a></li>
    </ul>
</div>

这是我的CSS：

#sidebar
{
    float:left;
    width:20%;
}

#sidebar > ul#sidebarSelector
{
    margin-top:100px;

    list-style:none;
    text-align:right;
    /*overflow:auto;*/
}

#sidebar > ul#sidebarSelector > li > a
{
    display:block;
    padding:5px 10px;
    font-family: "Open Sans Bold", Helvetica, Arial, sans-serif;
    font-size:16px;
    font-weight:500;
    text-decoration:none;
    text-transform:uppercase;
    color:#000000;
}

.selectedSidebarItem
{
    background-color:#0094ff;
    font-weight:700;
    border-radius: 3px; /*for rounded edges*/
    box-shadow: 0px 0px 15px #0094ff; /*for glowing*/
}

我尝试了下面提到的jQuery函数但是我没有成功。

$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').appendTo(document.body);
    var htmlText = text || this.val() || this.text();
    htmlText = $.fn.textWidth.fakeEl.text(htmlText).html(); //encode to Html
    htmlText = htmlText.replace(/\s/g, "&nbsp;"); //replace trailing and leading spaces
    $.fn.textWidth.fakeEl.html(htmlText).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};

var maxWidth = 0;
  $('a').each(function(i){
    if($(this).textWidth($(this).text, $(this).css('font')) > maxWidth)
      maxWidth = $(this).textWidth($(this).text, $(this).css('font'));
  });

$('#sidebarSelector').width(maxWidth);

使用上面的Html和css我得到了如下图所示的输出：

必需的输出：

Answer 1

你必须给ul一个宽度，否则它将调整到你的侧边栏的宽度，即20％

试试这段代码：

#sidebar {
    float:left;

}
ul#sidebarSelector {
    margin-top:100px;
    width:auto;
    max-width:125px;
    list-style:none;
    text-align:right;
    /*overflow:auto;*/
}
#sidebarSelector li {
    width:auto;
}
#sidebarSelector li a {
    display:block;
    padding:5px 10px;
    font-family:"Open Sans Bold", Helvetica, Arial, sans-serif;
    font-size:16px;
    font-weight:500;
    text-decoration:none;
    text-transform:uppercase;
    color:#000000;
}
.selectedSidebarItem {
    background-color:#0094ff;
    font-weight:700;
    border-radius: 3px;
    /*for rounded edges*/
    box-shadow: 0px 0px 15px #0094ff;
    /*for glowing*/
}

see fiddle here

注意：125px的最大宽度仅用于说明目的，您可能需要另外一个，特别是网络字体，但您会明白

Answer 2

我不知道您的整个结构，但从width: 20%删除#sidebar将获得您想要的结果而无需JavaScript代码，但您的侧边栏将获得无序列表中较大文本的值：

#sidebar {
  float: left;
  /*width: 20%;*/
}

JSFiddle

修改

只需在float: left元素中添加padding-left: 0和ul即可。 padding-left将取消代理添加的空间（Chrome在我的JSFiddle的ul左侧添加了一个空格）：

#sidebar {
  float: left;
  width: 20%;
  border: 1px solid #ccc; /* Only to visualize the solution */
}

#sidebar > ul#sidebarSelector {
  float: left;
  padding-left: 0;
  /* ...and the rest of your code */
}

JSFiddle

Answer 3

您可以获取最宽元素的宽度并将其应用于所有其他元素。

var maxWidth = 0;
$("a").each(function(){
   if($(this).width() > maxWidth){
     maxWidth = $(this).width();
   }
});

$("a").width(maxWidth);

从您的width: 20%中移除#sidebar。

JS Fiddle Demo

编辑：虽然这回答了您的具体问题，但看起来您根本不需要使用任何JS，如@ thiagobraga的回答中所述。

Answer 4

我为您的问题找到了CSS解决方案。在white-space: nowrap;中使用css并获得预期结果。

这是一个小提琴 link 。