HTML对齐下拉列表元素

Question

我想插入自定义元素（不是简单的链接）来下拉。 这是我的代码：

    <div class="container">
    <div class="btn-group" dropdown is-open="status.isopen">
        <button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
            Button dropdown <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
            <li role="menuitem"><a href="#">Action</a></li>
            <li role="menuitem">
                <div style="display:block">
                    <span>Action</span>
                    <button type="submit" class="invisible-input pull-right"><i class="fa fa-check-circle-o fa-lg"></i></button>
                    <button type="submit" class="invisible-input pull-right"><i class="fa fa-times-circle-o fa-lg"></i></button>
                </div>
            </li>
            <li role="menuitem"><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li role="menuitem"><a href="#">Separated link</a></li>
        </ul>
        </ul>
    </div>
</div>

我遇到了问题，我无法将Item的标签与其他标签对齐。 也许有人可以伸出援手来制作弦乐。

这是我得到的照片：

我使用angular，bootstrap和bootstrap-UI。

小提琴链接： http://jsfiddle.net/dJDHd/1165/

Answer 1

应该是对自定义CSS文件的简单补充：

.dropdown-menu > li > div {
    padding: 0 20px;
}

<强> Demo

Demo 2 （OP的代码 - 感谢Manoj Kumar）