Question

我一直在为我的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>

`

请帮帮我提前谢谢

Answer 1

我认为这就是你想要做的事情

    srch.npt1.it.addEventListener(Event.CHANGE, txtchng);
    txtchng(null);

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中的水平导航栏

1 个答案: