0

私は次のコードを持っています:

<div class="settingsMenu" style="top: 135px; left: 149px; display: block;">
        <ul>
            <li class="download" onclick="downTemplate('template1')">Download</li>
            <li class="delete" onclick="showConfirmationDialog ($(this))">
                Delete
                <div class="deleteItemConfirmation">
                    <div class="confirmationText">Are you sure?</div>
                    <div class="buttons"><button onclick="deleteTemplate ('template1')">Yes</button> <button onclick="hideConfirmationDialog();">No</button></div>
                </div>
            </li>
            <li class="info">Info</li>
        </ul>
    </div>

CSS:

.settingsMenu{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background-color: #FFFFFF;
    border: 1px solid #b5044a;
    border-radius: 5px;
    width: 150px;
    padding: 10px 0;
    margin: 0;
    z-index: 200;
}

.settingsMenu ul{
    list-style-type: none;
    width: 100%;
    margin: 0px;
    padding: 0;
}

.settingsMenu ul li {
    color: #000000;
    cursor: pointer;
    float: left;
    font-size: 14px;
    font-weight: normal;
    font-family: Arial;
    height: 18px;
    max-width: 100px;
    margin: 5px 20px;
    padding: 0;
    display: block;
    padding-left: 30px;
}

.settingsMenu ul li.edit{
    background: url("../img/edit-context-menu-icon.svg") no-repeat scroll center left white;
}

.settingsMenu ul li.delete{
    background: url("../img/delete-context-menu-icon.svg") no-repeat scroll center left white;
}

.settingsMenu ul li.info{
    background: url("../img/info-context-menu-icon.svg") no-repeat scroll center left white;
}

問題は次のとおりです。div.deleteItemConfirmation には「display: none;」があります。表示プロパティが「display: block;」になると、すべてが正しく表示されます。のテキストの前に奇妙なスペースが表示される

<li>Delete</li>
4

2 に答える 2

0

これはあなたを助けることができますか：

<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>

また

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

またはコメントで...

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

http://css-tricks.com/fighting-the-space-between-inline-block-elements/からアイデアを取り入れ、いくつかの同様の状況で私を助けました。

于 2012-11-08T10:38:28.727 に答える
0

変更してみる

<li class="delete" onclick="showConfirmationDialog ($(this))">
    Delete

に

<li class="delete" onclick="showConfirmationDialog ($(this))">Delete
于 2012-11-08T08:50:08.940 に答える