gpt4 book ai didi

html - 填充左右边框

转载 作者:太空宇宙 更新时间:2023-11-04 15:05:45 25 4
gpt4 key购买 nike

我创建了一个基本网页,主要内容居中,但我想填充内容两侧的空白区域。 http://hometown.net46.net/test.html这就是我所拥有的。我想填充左右两边的空白。注意 - 该网页是一个灵活的框。这是我的 html:

<head>
<link rel="stylesheet" href="main.css" />
</head>

<body>
<div id="big_wrapper">
<nav id="top_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="posts.php">Posts</a></li>
<li><a href="booking.php">Booking</a></li>
<li><a href="contact.php">Contact us</a></li>
</ul>
</nav>

<header id="top_header">
<h2>Image here</h2>
</header>
<div id="new_div">
<section id="main_section">

<article>
<header id="welc">
<h2>Welcome to the lounge!</h2>
</header>
<p>The lounge is a youth group for 11 - 18 year olds. We are located in Eastbourne.</p>


</article>

<article>
<header id="article2">
<h2>The lounge website created!!</h2>
</header>
<p>blahblahblahg.</p>


</article>


</section>

<aside id="side_news">
<h4><u>News:</u></h4>
<p>Lounge painting - 13th march</p>
</aside>
</div>
<footer id="footer">
Hosted by <a href="http://joomla.com">Joomla</a>
</footer>
</div>
</body>

还有我的CSS:

*{
margin: 0px;
padding:0px;
}
h2{
font:bold 20px tahoma;
}
h4{
font:bold 14px tahoma;
}
header, section, footer, aside, nav, article{
display:block;
}
body{
width:100%;
display:-webkit-box;
-webkit-box-pack: center;

}
#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header{
background:yellow;
border:3px solid black;
padding:20px;
}
#top_menu{
border:red;
background:#DBD7D9;
border-radius:2px;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 20px tahoma;
height:30px;

}
#top_menu a{
color:black;
text-decoration:none;


}
#top_menu li:hover{
background:yellow;
}
#new_div {
display:-webkit-box;
-webkit-box-orient:horizontol;

}
#main_section{
border:1px solid blue;
-webkit-box-flex: 1;
margin:20px;
padding:20px;
}
#side_news{
border:1px solid red;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC
}
#footer{
text-align:center;
padding:20px;
border-top: 2px solid green;
}

最佳答案

填充网站居中内容左侧和右侧空白的一种方法是将 main-content div 包装在另一个容器中 div 并为容器 div 设置背景色

<div id="container">
<div id="main-content">

</div>
</div>

CSS:

#container{
width: 960px;
background: #ccc;
}
#main-content{
width: 800px;
margin: 0 auto;
}

工作示例:

http://jsfiddle.net/7N3Ea/7/

关于html - 填充左右边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15904192/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com