如何在这三个水平物体之间留出空间
问题描述:
如何在这三个物体之间保持空间位置?如何在这三个水平物体之间留出空间
我试过几种方法,但是当我尝试它们时,它们跳到下一行。我添加了我正在尝试的代码。以及如何保持宽度的大小在1000px?
<!doctype html>
<html>
<body>
<title>AquaSL</title>
<link rel="icon" type="image/png" href="image/asl2.png"
<head>
<style>
p {
\t display: inline-block;
\t 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 {
\t
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>
\t \t \t \t \t \t \t
<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>
在哪里我要让空间如下图所示:
答
你只需要保证金添加到中间项()
<!doctype html>
<html>
<body>
<title>AquaSL</title>
<link rel="icon" type="image/png" href="image/asl2.png"
<head>
<style>
p {
\t display: inline-block;
\t 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 {
\t
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>
\t \t \t \t \t \t \t
<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>
你的html结构不正确你身上的标签到处都是 – Rahul