个人中心
gpt4 book ai didi

html - 如何使用 CSS 和 HTML 对齐导航标题中的文本？

转载 作者：行者123 更新时间：2023-11-28 03:33:32 25 4
gpt4 key购买 nike

我是网络开发的初学者。事实上，这是我的第二个 html 页面，所以它不是很整洁。

我在导航标题中添加了三个导航链接，但它们都位于该行之外，无论如何我都无法修复它们。

有人可以帮忙吗？您可以忽略其他代码，只检查导航代码。

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <title>The cutest creatures</title>
  <style>
    body {
      margin-left: 80px;
      background-image: url("img/wallpaper2.jpg");
      background-size: cover;
    }
    
    p {
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      color: black;
    }
    
    #unique {
      overflow: auto;
    }
    #image {
      float: left;
      margin-right: 20px;
    }
    #tab {
      background-image: url("img/wallpaper31.jpg");
      height: 120px;
      padding-top: 50px;
      background-color: black;
      margin-top: 25px;
    }
    #content {
      background-color: rgba(255, 231, 0, 0.5);
      padding: 1px 25px;
      margin: 1px 1px 25px 1px;
    }
    ul {
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      color: black;
    }
    ol {
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      color: black;
    }
    div {
      padding: 20px;
      margin-bottom: 30px;
    }
    .a {
      border: 2px teal dashed;
      float: left;
      margin-left: 6px;
    }
    .b {
      border: 2px teal dashed;
      float: right;
      margin-right: 80px;
    }
    
    table {
      margin: 80px;
      padding: 15px;
      border: 3px solid black;
      width: 100%;
      border-collapse: collapse;
      margin-left: 1px;
    }
    caption {
      font-size: 20px;
      text-align: left;
      padding: 10px;
      margin: 10px;
    }
    th, td {
      height: 8px;
      padding: 8px;
      border: 3px solid black;
    }
    th {
      background-color: #ececec;
    }
    nav {
      overflow: hidden;
      margin: 0px;
      padding: 0px;
    }
    li a {
      display: block;
      color: #ffff00;
      text-decoration: none;
      float: right;
      padding: 0px 20px;
      margin: 0px;
      position: relative;
    }
    
    #header {
      padding: 0px 0px;
      border-bottom: 1px solid black;
      margin: auto;
      height: 100px;
      line-height: 103px;
      margin-top: 1px;
    }
  </style>
</head>

<body>
  <div id="header">
    <img src="img/logo.jpg" width="100" height="100">
    <nav>
      <ul style="list-style-type:none;">
        <li><a href="#Famous_quotes">Famous quotes</a></li>
        <li><a href="#Some_Minions">Some Famous Minions</a></li>
        <li><a href="#Notable_Minions">Notable Minions</a></li>
      </ul>
    </nav>
  </div>
  <div id="tab">
    <div id="content">
      <center>
        <h1>Minions</h1>
        <h2><b><i>Bello!!!</i></b></h2>
      </center>
    </div>
  </div>
  <div id="unique">
    <img src="img/mmm.jpg" id="image">
    <p>The <b> Minions </b> are small, yellow, cylindrical creatures <del>who have one or two eyes</del>.
      <br>They bring much of the comedy in the film, and they are known as the <mark>scene-stealer</mark> of the movie.
      <br>Frequently, they speak in an incomprehensible language, called <u>Minionese</u>, occasionally switching to English.
      <br>They are much childish in some ways, yet they seem to be very intelligent in certain aspects.<a href="http://despicableme.wikia.com/wiki/Minions" target="_blank">Click here</a> to know more about minions.</p>
  </div>
  <div class="a">
    <h3>Famous quotes</h3>
    <ul>
      <li>"BEE-DO! BEE-DO!" - Carl mimicking fire truck siren.</li>
      <li>"POOPAYE" - Goodbye</li>
      <li>"TULALILOO TI AMO!" - We love you!</li>
    </ul>
  </div>
  <div class="b">
    <h3>Some Famous Minions</h3>
    <ol>
      <li>Bob</li>
      <li>Kevin</li>
      <li>Stuart</li>
    </ol>
  </div>

  <table>
    <caption><b>Notable Minions</b></caption>
    <tbody>
      <tr>
        <th>NAME</th>
        <th>APPEARANCE</th>
      </tr>
      <tr>
        <td>Carl</td>
        <td>Despicable Me</td>
      </tr>
      <tr>
        <td>Dave</td>
        <td>Despicable Me</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>Despicable Me 2</td>
      </tr>
      <tr>
        <td>Stuart</td>
        <td>Despicable Me 2</td>
      </tr>
      <tr>
        <td>Kevin</td>
        <td>Orientation Day</td>
      </tr>
    </tbody>
  </table>


</body>

</html>

最佳答案

我相信这样更好:

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <title>The cutest creatures</title>
  <style>
    body {
      margin-left: 80px;
      background-image: url("img/wallpaper2.jpg");
      background-size: cover;
    }
    
    p {
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      color: black;
    }
    
    #unique {
      overflow: auto;
    }
    #image {
      float: left;
      margin-right: 20px;
    }
    #tab {
      background-image: url("img/wallpaper31.jpg");
      height: 130px;
      padding-bottom: 50px;
      background-color: black;
      margin-top: 15px;
    }
    #content {
      background-color: rgba(255, 231, 0, 0.5);
      padding: 1px 25px;
      margin: 1px;
    }
    ul {
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      color: black;
    }
    ol {
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      color: black;
    }
    div {
      padding: 20px;
      margin-bottom: 30px;
    }
    .a {
      border: 2px teal dashed;
      float: left;
      margin-left: 6px;
    }
    .b {
      border: 2px teal dashed;
      float: right;
      margin-right: 80px;
    }
    
    table {
      margin: 80px;
      padding: 15px;
      border: 3px solid black;
      width: 100%;
      border-collapse: collapse;
      margin-left: 1px;
    }
    caption {
      font-size: 20px;
      text-align: left;
      padding: 10px;
      margin: 10px;
    }
    th, td {
      height: 8px;
      padding: 8px;
      border: 3px solid black;
    }
    th {
      background-color: #ececec;
    }
    nav {
      overflow: hidden;
      margin: 0px;
      padding: 0px;
		  text-align: center;
		  width:100%;
		}
    li, li a {
      display: inline;
      color: #ffff00;
      text-decoration: none;
      padding: 0px 10px;
    }
    
    #header {
      padding: 0px 0px;
      border-bottom: 1px solid black;
      margin: auto;
      height: 100px;
      line-height: 103px;
      margin-top: 1px;
    }
  </style>
</head>

<body>
  <div id="header">
    <img src="img/logo.jpg" width="100" height="100">
  </div>
  <div id="tab">
     <div align="center" id="content">
      	<h1>Minions</h1>
        <h2><b><i>Bello!!!</i></b></h2>
     </div>
     <nav>
      <ul style="list-style-type:none;">
        <li><a href="#Famous_quotes">Famous quotes</a></li>
        <li><a href="#Some_Minions">Some Famous Minions</a></li>
        <li><a href="#Notable_Minions">Notable Minions</a></li>
      </ul>
    </nav>
  </div>
  <div id="unique">
    <img src="img/mmm.jpg" id="image">
    <p>The <b> Minions </b> are small, yellow, cylindrical creatures <del>who have one or two eyes</del>.
      <br>They bring much of the comedy in the film, and they are known as the <mark>scene-stealer</mark> of the movie.
      <br>Frequently, they speak in an incomprehensible language, called <u>Minionese</u>, occasionally switching to English.
      <br>They are much childish in some ways, yet they seem to be very intelligent in certain aspects.<a href="http://despicableme.wikia.com/wiki/Minions" target="_blank">Click here</a> to know more about minions.</p>
  </div>
  <div class="a">
    <h3>Famous quotes</h3>
    <ul>
      <li>"BEE-DO! BEE-DO!" - Carl mimicking fire truck siren.</li>
      <li>"POOPAYE" - Goodbye</li>
      <li>"TULALILOO TI AMO!" - We love you!</li>
    </ul>
  </div>
  <div class="b">
    <h3>Some Famous Minions</h3>
    <ol>
      <li>Bob</li>
      <li>Kevin</li>
      <li>Stuart</li>
    </ol>
  </div>

  <table>
    <caption><b>Notable Minions</b></caption>
    <tbody>
      <tr>
        <th>NAME</th>
        <th>APPEARANCE</th>
      </tr>
      <tr>
        <td>Carl</td>
        <td>Despicable Me</td>
      </tr>
      <tr>
        <td>Dave</td>
        <td>Despicable Me</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>Despicable Me 2</td>
      </tr>
      <tr>
        <td>Stuart</td>
        <td>Despicable Me 2</td>
      </tr>
      <tr>
        <td>Kevin</td>
        <td>Orientation Day</td>
      </tr>
    </tbody>
  </table>


</body>

</html>

关于html - 如何使用 CSS 和 HTML 对齐导航标题中的文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44598689/

25 4 0
文章推荐： html - Dart WebUI 构建错误
文章推荐： html - 如何将段落放在一行中的div中？
文章推荐： javascript - 在 typescript 中的构造函数上传递对象？
文章推荐： c++ - g++ makefile，包含错误，没有那个文件或目录
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com