我试图将角色设置为“!”在列表之前。但是“!”在列表上方,而不是在左侧。我做错了什么?这是我的CSS
.cadreImportant{
padding:5px;
background-color:#ffaca3;
border:2px double #ff3924;
border-radius:9px;
text-align: left;
width:65%;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
.cadreImportant:before{
content: "!";
padding: 10px;
font-size: 3em;
float: left;
text-align: center;
margin-right: auto;
margin-left: auto;
height: 20px;
}
这是我的HTML代码:
<div class="cadreImportant">
<ul>
<li>Sélectionner un manuel utilisateur dans la liste ci-dessus</li>
<li>Après affichage du manuel,</li>
<ul>
<li>Cliquer dans le sommaire pour accéder au paragraphe correspondant</li>
<li>Cliquer sur la flèche jaune pour remonter au sommaire</li>
</ul>
</ul>
</div>
谢谢你的帮助,
最佳答案
您的代码似乎可以在所有最新版本中使用。但是,按照MDN所述,在使用width
时应指定float
。
但是,您可以使用position:relative
和position:absolute
。检查DEMO。
CSS代码
.cadreImportant{
padding:5px;
background-color:#ffaca3;
border:2px double #ff3924;
border-radius:9px;
text-align: left;
width:65%;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
position:relative;
}
.cadreImportant:before{
content: "!";
position:absolute;
display:block;
left:0;
padding: 10px;
font-size: 3em;
/*float: left;
text-align: center;
margin-right: auto;
margin-left: auto; */
height: 20px;
}