html - 使我的菜单水平(ul)出现问题
问题描述
我在水平制作列表时遇到问题,我尝试输入 display: inline; 和浮动:对;似乎不起作用。希望您能提供帮助,对于解释不好的问题,我刚开始接受教育。祝你有美好的一天
ul {
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;
margin-left: -17px;
width: 200px;
line-height: 350%;
}
li a {
display: inline;
color: #FFFFFF;
padding: 15px;
text-decoration: none;
font-size: 35px;
font-weight: 400;
}
li a.active {
color: white;
}
li a:hover:not(.active) {
color: #F39D2A;
}
<body style="background-color:black;">
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#about">Om os</a></li>
<li><a href="#prt">Portfojle</a></li>
<li><a href="#contact">Kontakt os</a></li>
</ul>
</div>
解决方案
尝试使用此代码将菜单设置为水平并删除白色或提供背景色,以便您可以看到文本正确地将浮动属性仅赋予 li。
ul {
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
}
li {
float: right;
}
li a {
display: inline;
color: #000;
padding: 15px;
text-decoration: none;
font-size: 35px;
font-weight: 400;
}
li a.active {
color: white;
}
li a:hover:not(.active) {
color: #F39D2A;
}
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#about">Om os</a></li>
<li><a href="#prt">Portfojle</a></li>
<li><a href="#contact">Kontakt os</a></li>
</ul>
</div>
推荐阅读
- azure - Cosmosdb mongo 在大集合上创建索引 - 风险
- javascript - 如何使用带有引导程序的jquery在一个模式上使用多个按钮
- html - HTML,href 在只需要一行时将其自身扩展到 6 行
- c++ - C++ glfw 未解决的外部符号错误
- amazon-web-services - 是否有专门允许访问 AWS KMS 的 AWS 安全组规则?
- typescript - 使用 Typescript 在 Vue3 Composition API 中观察 Value Prop
- go - Go mod replace 和 /vN 存储库的 github 分支
- python - scikit-learn 的 Iterative Imputer 的包装器自定义类,用于与 cross_val_score() 一起使用
- java - Java Swing自定义JList cellRenderer在添加新元素后未绘制所有元素
- c++ - C++ catch 块没有捕获异常