html - ul 浮动在父 div 底部边框上
问题描述
无序列表浮动在其父 div 的底部边框上。我不明白为什么会发生这种情况,并且只找到了解决问题的解决方法。
当我增加父 div(红色边框)的高度时,ul 将保持在完全相同的位置。
.bottom-container .comment-list .comment .buttons {
width: 100%;
height: 25px;
border: 1px solid red;
}
.bottom-container .comment-list .comment .buttons #comment-details {
float: right;
display: inline-block;
list-style-type: none;
margin-right: 10px;
}
.bottom-container .comment-list .comment .buttons #comment-details a li {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
background-color: rgba(50, 50, 50, 1.0);
border-right: 2px solid rgba(100, 100, 100, 1.0);
}
<div class="buttons">
<ul id="comment-details">
<a id="reply-button">
<li> Reply <i class="material-icons" style="font-size: 12pt"> reply </i></li>
</a>
<a id="upvote">
<li> 5 <i class="material-icons" style="font-size: 12pt"> arrow_upward </i></li>
</a>
<a id="downvote">
<li> 1 <i class="material-icons" style="font-size: 12pt"> arrow_downward </i></li>
</a>
</ul>
</div>
我希望 ul 位于中间并浮动到父 div 的右侧。
解决方案
CSS 可能很棘手,但我认为它的原因是 .button 类的填充没有设置顶部和底部,因此它是默认值。
此外,ul 的顶部和底部的边距也没有设置,因此它可能会将其丢弃。
推荐阅读
- python - 从 django 中的视图保存到 MongoDB
- java - Maven 测试构建失败
- css - 如果内容长于 1fr,为什么 minmax(auto, 1fr) track 与 auto 不同?
- java - 将可搜索活动的数据返回到以前的活动
- c++ - 无法在我的代码中得到负面结果
- python - Yfinance - 替代方案?
- python - SparkException:Python 工作者在执行火花动作时无法连接回来
- android - Jetpack compose:根据布尔值渲染矢量资产
- node.js - Websocket在不同路由上连续发送()
- node.js - 如何在 Dockerfile.template 中的 `COPY` 之前运行 TypeScript `tsc`?