Question

我将所有元素都设置在页面适合度的中间，为77％。在此处使用此代码：

body{
 margin: auto;
 padding: 0;
 width: 77%;
 font-family: arial;
}

我添加了一个蓝色的底边框，它的宽度也是77％。

如何扩展蓝色边框以完全适合页面？但是其他所有元素都保持77％吗？

我附上了一段代码，我知道它效果不佳，但是我目前正在练习关于边界的知识，这就是我遇到的问题。

我只需要蓝线就能显示整个页面。

body{
	margin: auto;
	padding: 0;
	width: 77%;
	font-family: arial;
}
#head{
	border-bottom: 2px solid blue;
	overflow: hidden
}

.container{
	width: 100%;
}

#head ul{
	margin: 0;
	padding: 0;
	float: right;
	padding-bottom: 10px;

}
#head ul li{
	list-style: none;
	display: inline-block;
	font-size: 20px;
	padding-left: 20px;

}
#head a{
	text-decoration: none;
	text-transform: uppercase;
}

#head header{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 30px;
	margin-top: 10px;
}

#head .container header{
	color: #0D1D6B;
	text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

#head .container span{
	color: #fff;	
	text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

<!DOCTYPE html>
<html>
<head>
	<title>practise</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<section id="head">
		<div class="container">
			<header>Holiday <span>resort</span></header>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="index.html">About Us</a></li>
				<li><a href="index.html">Services</a></li>
			</ul>

		</div>

	</section>




</body>
</html>

Answer 1

通常情况下，这是通过在其中包含77％宽度的容器的全角标头完成的。我已经在页面的页眉，主要内容区域和页脚中添加了.container元素。

我还更新了菜单项使用flexbox的功能。

body {
  margin: 0;
  font-family: Arial;
}

nav {
  margin: 10px 0;
}

header {
  border-bottom: 2px solid blue;
}

footer {
  border-top: 2px solid blue;
}

.container {
  margin: 0 auto;
  width: 77%;
}

.primary-nav {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  list-style: none;
}

.primary-nav li {
  font-size: 20px;
  margin-left: 20px;
}

.primary-nav a {
  text-decoration: none;
  text-transform: uppercase;
}

.brand,
.brand span {
  text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

.brand {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 30px;
  margin-top: 10px;
  color: #0D1D6B;
}

.brand span {
  color: #fff;
}

<header>
  <div class="container">
    <nav>
      <span class="brand">Holiday <span>resort</span></span>
      <ul class="primary-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="index.html">About Us</a></li>
        <li><a href="index.html">Services</a></li>
      </ul>
    </nav>
  </div>
</header>

<main>
  <div class="container">
    <h1>Page Title</h1>
    <p>
      Lorem ipsum dolor.
    </p>
  </div>
</main>

<footer>
  <div class="container">
    Footer
  </div>
</footer>

Answer 2

尝试将以下CSS添加到#head

#head{
  width: calc(100% + 23%);
  border-bottom: 2px solid blue;
  overflow: hidden;
  margin-left: -11.5%;
}

Answer 3

您可以将宽度设置为100％，然后在conexion: Object.values(state.conexion)的每一侧添加11.5％的padding，从而使div占页面的77％。由于填充位于div内部，因此边框会一直延伸到页面末尾，这与将div设置为11.5％有所不同，因为margin位于{{1 }}。

margin

Answer 4

最好的方法是使用父级div，将父级的width设置为100％，并为父级设置border，然后将{{1 }}到100％。您可以通过添加width

将#head居中

这是代码

#head

margin: auto

设置为77％时如何将边框扩展到全宽

4 个答案:

这是代码