我试图将角色设置为“!”在列表之前。但是“!”在列表上方,而不是在左侧。我做错了什么?这是我的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:relativeposition: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;
}

10-05 20:49
查看更多