Question

我有以下代码：

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

Answer 1

尝试更改

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

要

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

Answer 2

这可以帮到你：

<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/接受了这个想法，并在一些类似的情况下帮助了我。

div元素里面的div显示块使它有空的空间

2 个答案: