HTML 对齐下拉元素

Question

I want to insert custom element(not a simple link ) to drop down. Here is my code:

    <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>

I faced problem, that I cannot align label of Item like another ones. Maybe someone can give me a helping hand to make strings in drop down aligned.

Here is a picture what I get:

I use angular, bootstrap and bootstrap-UI.

Fiddle link: http://jsfiddle.net/dJDHd/1165/

Answer 1

Should be a simple addition to your custom CSS file:

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

Demo

Demo 2 (Fork of OP's code - thanks Manoj Kumar )