大家好，我是第一个问题，所以我很抱歉违反任何规则，或者制造一个愚蠢的主题。我正在用HTML和CSS开始我的旅程，我必须从图片中重新创建一个网站。它包含一个简单的站点模板，主标题上方有一个导航栏。我正在尝试在其上方安装topnav，并使链接显示在右侧，但顺序正确：Home-＆gt; About Us-＆gt; ...-＆gt; Contact。 Float：右声明帮助我在网站顶部设置导航，但链接只出现在左侧。如何在不破坏订单的情况下将它们移动到左侧？这是我的HTML和CSS代码。
body {
background-color: #ffffff;
margin: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
background-color: #b1b1b1;
direction: rtl;
}
li {
float: right;
direction: rtl;
}
.topnav {
direction: rtl;
text-align: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 30px;
text-decoration: none;
direction: rtl;
}
li a:hover {
background-color: #111;
}<!DOCTYPE html>
<html>
<html lang="en-US">
<link href="style.css" type="text/css" rel="stylesheet">
<head>
<title>Welcome</title>
</head>
<body>
<div>
<ul>
<li><em><a href="#home" style="text-decoration:none">Home</a></em></li>
<li><em><a href="#aboutus" style="text-decoration:none">About Us</a></em></li>
<li><em><a href="#services" style="text-decoration:none">Services</a></em></li>
<li><em><a href="#solutions" style="text-decoration:none">Solutions</a></em></li>
<li><em><a href="#support" style="text-decoration:none">Support</a></em></li>
<li><em><a href="#partners" style="text-decoration:none">Partners</a></em></li>
<li><em><a href="#contact" style="text-decoration:none">Contact</a></em></li>
</ul>
</div>
<header>
<h1>Welcome</h1>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h2>
</header>
正如我所说，我的第一个任务是用HTML和CSS做，所以我的代码很乱。随意问任何问题！谢谢你的帮助！
答案 0 :(得分：1)
来自li的remove float非常简单，只需display:inline-block;并将text-align: right添加到ul，请参阅以下代码：
body {
background-color: #ffffff;
margin: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
background-color: #b1b1b1;
text-align:right;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 30px;
text-decoration: none;
direction: rtl;
}
li a:hover {
background-color: #111;
}<!DOCTYPE html>
<html>
<html lang="en-US">
<link href="style.css" type="text/css" rel="stylesheet">
<head>
<title>Welcome</title>
</head>
<body>
<div>
<ul>
<li><em><a href="#home" style="text-decoration:none">Home</a></em></li>
<li><em><a href="#aboutus" style="text-decoration:none">About Us</a></em></li>
<li><em><a href="#services" style="text-decoration:none">Services</a></em></li>
<li><em><a href="#solutions" style="text-decoration:none">Solutions</a></em></li>
<li><em><a href="#support" style="text-decoration:none">Support</a></em></li>
<li><em><a href="#partners" style="text-decoration:none">Partners</a></em></li>
<li><em><a href="#contact" style="text-decoration:none">Contact</a></em></li>
</ul>
</div>
<header>
<h1>Welcome</h1>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h2>
</header>
答案 1 :(得分：1)
在您的情况下，您将float: right应用于列表中的每个项目，这会导致向后列表。
只需将float移至其父ul，然后将ul的样式移至其父容器.topnav即可。
通过将width: 100%设置为display: inline-block和ul来阻止li。
您也可以float: right删除text-align: right; display: block：ul将是100％宽，其子项将与右侧对齐。
body {
background-color: #ffffff;
margin: 0px;
}
ul {
list-style-type: none;
display: inline-block;
float: right;
}
li {
display: inline-block;
}
.topnav {
text-align: right;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
background-color: #b1b1b1;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 30px;
text-decoration: none;
direction: rtl;
}
li a:hover {
background-color: #111;
}<!DOCTYPE html>
<html>
<html lang="en-US">
<link href="style.css" type="text/css" rel="stylesheet">
<head>
<title>Welcome</title>
</head>
<body>
<div class="topnav">
<ul>
<li><em><a href="#home" style="text-decoration:none">Home</a></em></li>
<li><em><a href="#aboutus" style="text-decoration:none">About Us</a></em></li>
<li><em><a href="#services" style="text-decoration:none">Services</a></em></li>
<li><em><a href="#solutions" style="text-decoration:none">Solutions</a></em></li>
<li><em><a href="#support" style="text-decoration:none">Support</a></em></li>
<li><em><a href="#partners" style="text-decoration:none">Partners</a></em></li>
<li><em><a href="#contact" style="text-decoration:none">Contact</a></em></li>
</ul>
</div>
<header>
<h1>Welcome</h1>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h2>
</header>
答案 2 :(得分：0)
只需在li
中使用float:left即可
body {
background-color: #ffffff;
margin: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
background-color: #b1b1b1;
direction: rtl;
}
li {
float: left;
}
.topnav {
text-align: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 30px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}<!DOCTYPE html>
<html>
<html lang="en-US">
<link href="style.css" type="text/css" rel="stylesheet">
<head>
<title>Welcome</title>
</head>
<body>
<div>
<ul>
<li><em><a href="#home" style="text-decoration:none">Home</a></em></li>
<li><em><a href="#aboutus" style="text-decoration:none">About Us</a></em></li>
<li><em><a href="#services" style="text-decoration:none">Services</a></em></li>
<li><em><a href="#solutions" style="text-decoration:none">Solutions</a></em></li>
<li><em><a href="#support" style="text-decoration:none">Support</a></em></li>
<li><em><a href="#partners" style="text-decoration:none">Partners</a></em></li>
<li><em><a href="#contact" style="text-decoration:none">Contact</a></em></li>
</ul>
</div>
<header>
<h1>Welcome</h1>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h2>
</header>
答案 3 :(得分：0)
在下面添加css：
ul {
width: 100%;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #b1b1b1;
text-align: right;
}
ul li {
display: inline-block;
/* remove float and direction properties */
}
如果您没有在一行中获取菜单减少填充表单<a>标记