Question

我想在一行中显示（蓝色）子菜单，但不知何故它以多行显示。如果我添加固定宽度它可以正常工作，但它应该是灵活的，因为这个菜单将是动态的，可以根据用户的要求进行更改。

请检查小提琴 http://jsfiddle.net/awaises/meXB9/

HTML：

<div class="left-bar">
<ul class="menu">
    <li>
        <a href="#">For Sale</a>
        <ul class="sub-menu">
            <li><a href="#">Residential</a></li>
            <li><a href="#">Commercial</a></li>
            <li><a href="#">Industrial</a></li>
            <li><a href="#">Agriculture</a></li>
            <li><a href="#">Land</a></li>
        </ul>
    </li>
    <li><a href="#">Rent To Own</a></li>
    <li><a href="#">Key Money</a></li>
    <li><a href="#">For Sale at Auction</a></li>
</ul>
</div>

CSS：

body{font:normal 12px/24px arial;}
.left-bar{background:#262626; width:150px; text-align:center; text-decoration}
ul.menu, ul.sub-menu, ul.sub-menu2{margin:0; padding:0; list-style:none;}
ul.menu li{ position:relative; }
ul.menu li a{
    color:#adadad;
    font-weight:bold;
    text-decoration:none;
    border-bottom:1px solid #171717;
    display:block;
    }
ul.sub-menu{
    position:absolute;
    background:#1ea3d7;
    top:2px; left:150px;
    }
ul.sub-menu li{float:left;}
ul.sub-menu li a{color:#fff;border:none;padding:0 10px;}

Answer 1

Updated Fiddle

在top:0px;

中制作ul.sub-menu

更新：使用display:inline-flex;

Answer 2

使用以下内容。

.sub-menu {
    display: table;
}
.sub-menu li {
    /* float: left; */
    display: table-cell;
}

Flo上<li>无法处理绝对位置</li>

2 个答案: