嘿，我该如何在中间放置这些，并在它们之间留出更多的空间？我已经看了很多东西，网上找不到任何东西。如果可以的话，您也可以对其进行优化，因为我的标题和框之间也都没有空格
这里是我的HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Still developing">
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta name="theme-color" content="#5b0c0c" />
<!-- Titlen -->
<title>Preview</title>
</head>
<body>
<!-- navbar -->
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<!-- under navbar-->
<div class="header">
<div id="container">
<div id="context">
<!--<div id="header-image"> -->
</div>
</div>
</div>
<br>
<br>
<br>
<section id="textbox">
<div>Text box 1</div>
<div>Text box 2</div>
<div>Text box 3</div>
</section>
<!-- footer -->
<div class="footer">
<p>Copyrights reserved to © realmymonsterdk| Contact information: <a href="mymonsterdk@gmail.com">
mymonsterdk@gmail.com</a>.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Still developing">
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta name="theme-color" content="#5b0c0c" />
<!-- Titlen -->
<title>Preview</title>
</head>
<body>
<!-- navbar -->
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<!-- under navbar-->
<div class="header">
<div id="container">
<div id="context">
<!--<div id="header-image"> -->
</div>
</div>
</div>
<br>
<br>
<br>
<section id="textbox">
<div>Text box 1</div>
<div>Text box 2</div>
<div>Text box 3</div>
</section>
<!-- footer -->
<div class="footer">
<p>Copyrights reserved to © realmymonsterdk| Contact information: <a href="mymonsterdk@gmail.com">
mymonsterdk@gmail.com</a>.</p>
</div>
</body>
</html>
这是我当前的CSS：
html, body {
width: 100%;
margin: 0;
}
body {
font-family: "Lato", sans-serif;
background-color: #353535;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #931010;
}
.active {
background-color: #931010;
}
.header{
width: 100%;
height: 550px;
background-image: url("https://static-cdn.jtvnw.net/jtv_user_pictures/b76051a5-b2e6-4fbb-b53d-f41f62410905-profile_banner-480.png");
background-repeat: no-repeat;
background-size: cover;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
}
#textbox {
white-space: nowrap;
align-items: center;
}
#textbox div {
display: inline-block;
width: 250px;
height: 250px;
margin: auto;
background: red;
overflow: hidden;
}
#container {
color: white;
width: 400px;
height: 260px;
}
#context {
width: 250px;
margin-left: auto;
margin-right: -700px;
position: relative;
top: 60%;
transform: translateY(10%);
}
#white {
color: white;
}
#header-image {
color: white;
background-image: url("https://static-cdn.jtvnw.net/jtv_user_pictures/b76051a5-b2e6-4fbb-b53d-f41f62410905-profile_banner-480.png");
width: 750px;
height: 260px;
position: relative;
top: 30%;
transform: translateY(10%);
}
答案 0 :(得分：0)
为了使其居中，我在CSS中为div使用了text-align: center;。为了在框之间留出空间，我在CSS中使用border: 30px solid #353535;使边框与背景具有相同的颜色。这是最终代码：
html, body {
width: 100%;
margin: 0;
}
body {
font-family: "Lato", sans-serif;
background-color: #353535;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #931010;
}
.active {
background-color: #931010;
}
.header{
width: 100%;
height: 550px;
background-image: url("https://static-cdn.jtvnw.net/jtv_user_pictures/b76051a5-b2e6-4fbb-b53d-f41f62410905-profile_banner-480.png");
background-repeat: no-repeat;
background-size: cover;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
}
#textbox {
white-space: nowrap;
align-items: center;
text-align: center;
}
#textbox div {
display: inline-block;
width: 250px;
height: 250px;
margin: auto;
background: red;
overflow: hidden;
}
#container {
color: white;
width: 400px;
height: 260px;
}
#context {
width: 250px;
margin-left: auto;
margin-right: -700px;
position: relative;
top: 60%;
transform: translateY(10%);
}
#white {
color: white;
}
#header-image {
color: white;
background-image: url("https://static-cdn.jtvnw.net/jtv_user_pictures/b76051a5-b2e6-4fbb-b53d-f41f62410905-profile_banner-480.png");
width: 750px;
height: 260px;
position: relative;
top: 30%;
transform: translateY(10%);
}
#box {
border: 30px solid #353535;
text-align: left;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Still developing">
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta name="theme-color" content="#5b0c0c" />
<!-- Titlen -->
<title>Preview</title>
</head>
<body>
<!-- navbar -->
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<!-- under navbar-->
<div class="header">
<div id="container">
<div id="context">
<!--<div id="header-image"> -->
</div>
</div>
</div>
<br>
<br>
<br>
<section id="textbox">
<div id="box">Text box 1</div>
<div id="box">Text box 2</div>
<div id="box">Text box 3</div>
</section>
<!-- footer -->
<div class="footer">
<p>Copyrights reserved to © realmymonsterdk| Contact information: <a href="mymonsterdk@gmail.com">
mymonsterdk@gmail.com</a>.</p>
</div>
</body>
</html>
顺便说一下，我会全屏显示很小的代码段。
答案 1 :(得分：0)
可能与flexbox一起使用。
html, body {
width: 100%;
margin: 0;
}
body {
font-family: "Lato", sans-serif;
background-color: #353535;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #931010;
}
.active {
background-color: #931010;
}
.header{
width: 100%;
height: 550px;
background-image: url("https://static-cdn.jtvnw.net/jtv_user_pictures/b76051a5-b2e6-4fbb-b53d-f41f62410905-profile_banner-480.png");
background-repeat: no-repeat;
background-size: cover;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
}
#textbox {
display:flex;
justify-content:space-around;
}
#textbox div {
display: inline-block;
width: 250px;
height: 250px;
margin: auto;
background: red;
overflow: hidden;
}
#container {
color: white;
width: 400px;
height: 260px;
}
#context {
width: 250px;
margin-left: auto;
margin-right: -700px;
position: relative;
top: 60%;
transform: translateY(10%);
}
#white {
color: white;
}
#header-image {
color: white;
background-image: url("https://static-cdn.jtvnw.net/jtv_user_pictures/b76051a5-b2e6-4fbb-b53d-f41f62410905-profile_banner-480.png");
width: 750px;
height: 260px;
position: relative;
top: 30%;
transform: translateY(10%);
} <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Still developing">
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta name="theme-color" content="#5b0c0c" />
<!-- Titlen -->
<title>Preview</title>
</head>
<body>
<!-- navbar -->
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<!-- under navbar-->
<div class="header">
<div id="container">
<div id="context">
<!--<div id="header-image"> -->
</div>
</div>
</div>
<br>
<br>
<br>
<section id="textbox">
<div>Text box 1</div>
<div>Text box 2</div>
<div>Text box 3</div>
</section>
<!-- footer -->
<div class="footer">
<p>Copyrights reserved to © realmymonsterdk| Contact information: <a href="mymonsterdk@gmail.com">
mymonsterdk@gmail.com</a>.</p>
</div>
</body>
</html>