我想制作一个在 Windows 命令提示符
中运行命令的指南。
.bold-cli {
float: left;
padding: 20px;
margin: 20px 30px;
font-family: Arial;
font-style: italic;
font-weight: bold;
background-color: black;
color: white;
}
<div class="bold-cli">
C:\> Rundll32 %windir%\system32\dfshim.dll CleanOnlineAppCache
</div>
我希望 div
只占用足以显示命令的空间,而不是水平拉伸(stretch),所以我添加了 float: left
。
问题是,这个div后面的内容不是换行开始的,是显示在右边的。
最佳答案
如下所示添加一个 clearfix
div 以移除影响下一个元素的 float 。
.bold-cli {
float: left;
padding: 20px;
margin: 20px 30px;
font-family: Arial;
font-style: italic;
font-weight: bold;
background-color: black;
color: white;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<div class="bold-cli">
ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC AB ABC ABC ABC ABC
</div>
<div class="clearfix">
</div>
Start from new line
关于html - 使左对齐的div占据所有空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50809518/