gpt4 book ai didi

html - css 绝对位置和继承显示 break ul li 换行

转载 作者:行者123 更新时间:2023-11-27 23:04:53 25 4
gpt4 key购买 nike

我只是在发生奇怪事情的地方剥离了我非常庞大的代码的一部分:

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

css 绝对位置和继承显示在li上面添加一个新的空行。如何在不删除现有 css 的情况下删除该行?

最佳答案

如果你不想有一个“ghostli点,你应该这样做:

.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 只在 displays独特的线条。

关于html - css 绝对位置和继承显示 break ul li 换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50264435/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com