css ul列出多项对齐

Question

我有一个ul元素，可以包含多个项目。我将我的列表放在300px固定面板中。

<div class="panel panel-primary" style="width:300px">
<div class="panel-heading"> Menu Items</div>
<div class="panel-body">
    <ul>
        <li>
            <div class="content">
                <button class="btn btn-sm btn-default">
                    <span class="glyphicon glyphicon-th" ></span>
                </button>
               A Long Menu Item Name 
                <div class="settings">
                    <div class="show-settings pull-rigth">
                        <div class="btn-group pull-right">
                            <button class="btn btn-xs btn-info">
                                <span class="glyphicon glyphicon-eye-open"></span>
                            </button>
                            <button class="btn btn-xs btn-info">
                                <span class="glyphicon glyphicon-eye-close"></span>
                            </button>              
                        </div>
                    </div>
                    <button class="btn btn-xs btn-default pull-right">
                        <span class="glyphicon glyphicon-cog"></span>
                    </button>
                </div>
            </div>
        </li>           
    </ul>
</div>

我的css设置在这里

 ul, li { 
    list-style: none; margin: 0; padding: 0; 
}

ul { padding-left: 1em; }
li { padding-left: 0; }

.show-settings{ 
    display: none;
}
.settings:hover .show-settings{
    display : block;
}

.content{
    position: relative;    
    padding: .4em .4em .4em 0.2em;
    *padding: .4em;
    margin: .5em 0;
    background: #D9EDF7 ;
    color: #444;
    text-decoration: none;
    border-radius: .3em;  
}

Working code is here

我的设置类项目不在蓝色内容中。

我的设置按钮数可能是3或4.是否可以向菜单项溢出如下文本：

或在内容中流动新行。

Answer 1

将display:inline添加到您的settings班级

.settings{
    display:inline;
}

<强> DEMO

<强>更新

在撰写div.settings以下的课程时，您有拼写错误。如下：

<div class="show-settings pull-rigth">
                           <!--^^^^^-->

应该是

<div class="show-settings pull-right">

可能是它的小提琴，但仍然需要注意。

Answer 2

尝试使用它。

在css中

.settings { display: inline-block; white-space: nowrap; vertical-align: middle; }

.menu-label { display: inline-block; vertical-align: middle; }

html中的

-

更改此

</button> A Long Menu Item Name <div class="settings">

到这个

</button> <span class="menu-label">A Long Menu Item Name</span> <div class="settings">

Answer 3

我稍微修改了你的结构。试试下面的代码，你甚至可以对它进行微调。

Html

<div class="panel panel-primary" style="width:300px">
    <div class="panel-heading"> Menu Items</div>
    <div class="panel-body">
        <ul>
            <li>
                <div class="content">
                    <button class="btn btn-sm btn-default">
                        <span class="glyphicon glyphicon-th" ></span>
                    </button>
                    <span class="title">A Long Menu Item Name A Long Menu Item Name</span>
                    <div class="settings">
                        <button class="btn btn-xs btn-default pull-right">
                            <span class="glyphicon glyphicon-cog"></span>
                        </button>
                        <div class="show-settings pull-rigth">
                            <button class="btn btn-xs btn-info pull-right">
                                <span class="glyphicon glyphicon-eye-open"></span>
                            </button>
                            <button class="btn btn-xs btn-info pull-right">
                                <span class="glyphicon glyphicon-eye-close"></span>
                            </button>                            
                        </div>
                    </div>
                </div>
            </li>

        </ul>
    </div>
</div>

<强> CSS

 ul, li { 
    list-style: none; margin: 0; padding: 0; 
}

ul { padding-left: 1em; }
li { padding-left: 0; }

.show-settings{ 
    display: none;
}
.settings{
    position: absolute;
    top: 8px;
    right: 9px;
    width: 75px;
}
.settings:hover .show-settings{
    display : block;
}

.content{
    position: relative;    
    padding: .4em .4em .4em 0.2em;
    *padding: .4em;
    margin: .5em 0;
    background: #D9EDF7 ;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    position: relative;
}
span.title {
    display: inline-block;
    width: 70%;
    padding-left: 3px;
}
.btn-default{
    vertical-align: top;
}

Answer 4

您可以.settings使用JSObject类。