Question

我有一个可折叠菜单（使用Bootstrap 3），它使用带有链接（锚标记）的无序列表作为列表项。我希望能够得到一个小的＆＃34;删除＆＃34;按钮与锚标记文本显示在同一行，但它保持包装。意图是删除按钮出现在＆＃34;活动＆＃34;旁边。列表中的链接，如果我可以使布局/样式正确，这将是很容易的。这是一个jsfiddle - 看看＆＃34; Header 2＆＃34;看看我的意思：http://jsfiddle.net/jpatchak/2dvxL5dv/6/

我使用的是Bootstrap 3.3.5和JQuery 2.1.3。

CSS：

ul.nav-list.my-tree
    {
        padding:0px 20px;
    }
    li.my-tree-item
    {
        padding:0px 0px;
        margin: 0px 0px;
        line-height: 5px;
        cursor: pointer;
    }
    li.my-divider
    {
        height: 2px;
        margin:9px 1px;
        overflow:hidden;
        background-color:#e5e5e5;
        border-bottom: 1px solid #fff;
    }
    label.my-toggler.my-nav-header
    {

        cursor: pointer;
        font-size: 15px;
    }
    .my-nav-header
    {
        font-size: 12px;
        font-weight: bold;
        line-height: 20px;
        color:#999;
        text-transform: uppercase;
    }
li a 
{
    overflow: hidden; 
    display: inline-block; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}

标记：

<div class="well col-sm-4" style="height:1000px;">
    <ul class="nav nav-list">
        <li class="my-divider"></li>
        <li>
            <label class="my-nav-header my-toggler">Header 1</label>
            <ul class="nav nav-list tree my-tree">
                <li class="my-tree-item"><a href="#">First Item</a></li>
                <li class="my-tree-item"><a href="#">Second Item With Really Long Text</a></li>
            </ul>
        </li>
        <li class="my-divider"></li>
        <li>
            <label class="my-nav-header my-toggler">Header 2</label>
            <ul class="nav nav-list tree my-tree">
                <li class="my-tree-item"><a href="#">First Item</a></li>
                <li class="my-tree-item"><a href="#">Second Item With Really Long Text</a><button class="btn btn-danger btn-xs">Delete</button></li><!--this is where I want the text (with ellipses) and the button on the same line...
            </ul>
        </li>   
    </ul>
</div>

动画的一些JQuery：

$(document).ready(function(e){
    $('ul.my-tree').css('display', 'none');
});

$('label.my-toggler').click(function () {
    $(this).parent().children('ul.my-tree').toggle(300);

});

Answer 1

将以下规则添加到在引导程序之后加载的css：

.nav>li>a {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 48px);
}

http://jsfiddle.net/2dvxL5dv/7/

Answer 2

可能你可以改变你的css：

Reduce

Answer 3

如果您希望它位于锚点右侧，请将以下内容添加到.btn类中：

.btn {
    position: absolute;
    right: -33px;
    top: 0;
    /* the rest of your styles here */
}

否则改变＆＃34;对＆＃34;向左，如果你想在另一边进行调整。

Answer 4

我想这就是你要找的东西

http://jsfiddle.net/2dvxL5dv/8/

li.my-tree-item a {
        display: inline-block;
    }
    li.my-tree-item .btn {
        display: inline-block;
        vertical-align: top;
    }

刚刚添加了这些代码。

在li中获取同一行上的按钮和锚点标记

4 个答案: