我一直在为我的 cse 作业创建一个网页...我想在网站的早期有一个导航栏...相反，我得到了这个 nav bar below the borderline where it supposed to be.
这是代码`
<body style="background: linear-gradient(#c3c3e5, #f1f0ff);">
<style>
#title {
font-family:courier;
font-size:40px;
text-align:center;
text-transform:uppercase;
border:2px solid black;
border-radius:30px;
background-color:#443266;
}
#Welcome {
font-family:courier;
font-size:30px;
text-align:center;
text-decoration:underline;
text-decoration: bold;
}
#q {
font-family:courier;
font-size:25px;
text-align:justify;
text-decoration:none;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
float:right;
}
li a {
display:inline-block;
text-decoration:none;
background-color:black;
color:white;
}
#audio {
float:right;
display:inline-block;
background-color:lightblue;
}
</style>
<div id="title">
<p>Star Travel</p>
<audio controls autoplay loop id="audio">
<source src="../assets/audio/13_Fairy Law.mp3" type="audio/mpeg">
</audio>
<br>
<br>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="user-rev.html">Review</a></li>
<li><a href="trip-accom.html">Accomodation</a></li>
<li><a href="site-trip.html">Trip</a></li>
<li><a href="main.html">Home</a></li>
</ul>
</div>
`
请帮帮我 提前致谢
最佳答案
我想这就是你想做的
body{
background: linear-gradient(#c3c3e5, #f1f0ff);
margin: 0;
}
#title {
font-family:courier;
text-align:center;
text-transform:uppercase;
border:2px solid black;
border-radius:30px;
background-color:#443266;
}
p{
font-size:40px;
}
#Welcome {
font-family:courier;
font-size:30px;
text-align:center;
text-decoration: bold;
}
#q {
font-family:courier;
font-size:25px;
text-align:justify;
text-decoration:none;
}
ul {
list-style-type:none;
margin:0;
display: inline-block;
width: 100%;
background-color: #111;
padding: 10px 0;
}
li {
float:left;
padding: 0 10px;
}
li a {
text-decoration:none;
color:white;
}
#audio {
float:right;
display:inline-block;
background-color:lightblue;
}<div id="title">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="user-rev.html">Review</a></li>
<li><a href="trip-accom.html">Accomodation</a></li>
<li><a href="site-trip.html">Trip</a></li>
<li><a href="main.html">Home</a></li>
</ul>
<p>Star Travel</p>
<audio controls autoplay loop id="audio">
<source src="../assets/audio/13_Fairy Law.mp3" type="audio/mpeg">
</audio>
<br>
<br>
</div>关于html - div 中的水平导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40056976/