Question

如何在这三个项目之间留出空间？

我尝试过几种方法，但是当我尝试它们时，它们会跳到下一行。我添加了我正在尝试的代码。以及如何将宽度保持在1000px？

<!doctype html>
<html>
<body>
<title>AquaSL</title>
<link rel="icon" type="image/png" href="image/asl2.png"
<head>

<style>
p {
 	display: inline-block;
 	float: left;
  }
  ul {
     list-style-type: none;
     width:33%;     
     margin: 0 auto;
     padding: 0;
     overflow: hidden;
     background-color: #339cff;
     display: inline-block;
     float: left;
     }
  li {
      float: left;
   
    }
  li a {
	
      display: block;
      color: white;
      text-align: center;
      padding: 14px 17px;
      text-decoration: none;
     }
  li a:hover:not(.active) {
      background-color: #345cff;
     }
  .active {
     background-color: #ff9333;
     }
</style>
<meta charset="utf-8">

<p><b><font color="white" size="+3">M Y  W E B</font></b></p>
<body>
<ul>
  <li><a class="active" href="#home">HOME</a></li>
 <li><a href="#news.html">NEWS</a></li>
 <li><a href="page2.html">Page 2</a></li>
 <li><a href="page3.html">page3</a></li>
 <li><a href="#page4.html">page4</a></li>
 <li><a href="#about us.html">ABOUT US</a></li>
</ul>

							

<img src="image/facebook-icon.png" width="54" height="55">
</body>
 <body background="image/background2.jpg"
 <br>
 <h5 style="position: fixed; bottom: 0; width:100%;text-align: center">
 <font color="yellow"><strong> Copyright © MY WEB 2016 All Rights Reserved.
 </strong></font></h5>
<img src="/image/strip.jpg" style="width:100%;">
 </body>
</html>

我想要制作空格的地方如下所示：

Answer 1

您只需要在中间项（）

中添加边距

<!doctype html>
<html>
<body>
<title>AquaSL</title>
<link rel="icon" type="image/png" href="image/asl2.png"
<head>

<style>
p {
 	display: inline-block;
 	float: left;
  }
  ul {
     list-style-type: none;
     width:33%;     
     margin: 0 10px;
     padding: 0;
     overflow: hidden;
     background-color: #339cff;
     display: inline-block;
     float: left;
     }
  li {
      float: left;
   
    }
  li a {
	
      display: block;
      color: white;
      text-align: center;
      padding: 14px 17px;
      text-decoration: none;
     }
  li a:hover:not(.active) {
      background-color: #345cff;
     }
  .active {
     background-color: #ff9333;
     }
</style>
<meta charset="utf-8">

<p><b><font color="white" size="+3">M Y  W E B</font></b></p>
<body>
<ul>
  <li><a class="active" href="#home">HOME</a></li>
 <li><a href="#news.html">NEWS</a></li>
 <li><a href="page2.html">Page 2</a></li>
 <li><a href="page3.html">page3</a></li>
 <li><a href="#page4.html">page4</a></li>
 <li><a href="#about us.html">ABOUT US</a></li>
</ul>

							

<img src="image/facebook-icon.png" width="54" height="55">
</body>
 <body background="image/background2.jpg"
 <br>
 <h5 style="position: fixed; bottom: 0; width:100%;text-align: center">
 <font color="yellow"><strong> Copyright © MY WEB 2016 All Rights Reserved.
 </strong></font></h5>
<img src="/image/strip.jpg" style="width:100%;">
 </body>
</html>

如何在这3个水平项目之间留出空间

1 个答案: