Question

我刚刚删除了一些非常庞大的代码，其中发生了一件奇怪的事情：

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <style>
        .something {
            position: absolute;
            display: inherit;
        }
    </style>
</head>
<body>

<p>This is a UL</p>


<ul>
    <li>Text 1</li>
    <li title="Press Enter to validate">
        <div class="something">
            <span>Text 2</span>
        </div>
    </li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

css绝对位置和继承显示在li上方添加一个新的空行。如何删除该行而不删除现有的CSS？

Answer 1

如果你不想拥有“幽灵”li点，你应该这样做：

.something {
    position: absolute;
    display: inline;
}

<p>This is a UL</p>

<ul>
    <li title="Press Enter to validate">
        <div class="something">
            <input type="text" value="" autocomplete="off"  placeholder="Add a new topic">
        </div>
    </li>
</ul>

属性display: inline;将修复该属性而不删除任何CSS，您只需要更改它。

我不知道为什么会发生这种情况，但问题是div标记会创建一个新行。通过将其display设置为inline，它可以解决问题，因为它可以确保div仅在唯一的行中显示。

css绝对位置和继承显示使用新行

1 个答案: