显示背景

显示背景

关注
发信
关注(28)粉丝(399)

html - 在仍然显示背景的情况下， flexbox 之间是否有空隙？

我试图在这些部分之间留出空间，同时仍显示背景，但不确定如何做。我尝试了填充和使边框透明，但这没有用。我考虑过改用网格，但是我想看看在仍然使用flex的情况下是否可以这样做。谢谢

This is what it looks like with the background



body{
	font-family:'Helvetica';
	float:center;
	background-color:#606060;
	background-image:url(images/image1.jpg);
	background-size:2048px 1152px;
	background-repeat:no-repeat;
}

a{
	text-decoration:none;
	color:#BF9553;
}

a:hover{
	color:white;
}

a:active{
	color:white;
}

a:visited{
	color:none;
}

#header{
	color:#BF9553;
	text-align:center;
	font-size:60px;
}

#clockbox{
	color:#BF9553;
	text-align:center;
	font-size:20px;
	margin-top:-75px;
	padding-bottom:25px;
}

.links{
	border:1px solid #2E2E2E;
	padding:10px;
	list-style-type:none;
	line-height:1.6em;
	align-content:center;
}

.container-1{
	background-color:#404040;
	display:flex;
	width:550px;
	margin: 0 auto;
	justify-content:space-around;
}

#general{
	flex:1;
}

#manga{
	flex:1;
}

#mail{
	flex:1;
}

.container-2{
	background-color:#404040;
	display:flex;
	width:550px;
	margin: 0 auto;
}

#torrents{
	flex:1;
}

<!DOCTYPE html>
<html>
<head>
	<title>Startpage</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header>
		<div id="header">
			<h1>Hello, Kyle</h1>
		</div>
	<div id="clockbox"></div>

		<script type="text/javascript">
			function GetClock(){
			var d=new Date();
			var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear();
			var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds();
			if(nmin<=9) nmin="0"+nmin;
			if(nsec<=9) nsec="0"+nsec;

			var clocktext=""+ndate+"."+(nmonth+1)+"."+nyear+" "+nhour+":"+nmin+":"+nsec+"";
			document.getElementById('clockbox').innerHTML=clocktext;
			}

			GetClock();
			setInterval(GetClock,1000);
		</script>

	</div>
	</header>
	<div class="container-1">

		<div id="general" class="links">
			<li><a href="https://duckduckgo.com">duckduckgo</a></li>
			<li><a href="https://youtube.com/feed/subscriptions">youtube</a></li>
			<li><a href="https://netflix.com/browse">netflix</a></li>
			<li><a href="https://twitch.tv/directory/following">twitch</a></li>
			<li><a href="https://twitter.com">twitter</a></li>
			<li><a href="https://hulu.com">hulu</a></li>
		</div>

		<div id="manga" class="links">
			<li><a href="https://myanimelist.net">myanimelist</a></li>
			<li><a href="https://mangadex.org/manga/1054/it-s-not-my-fault-that-i-m-not-popular">watamote</a></li>
			<li><a href="https://mangadex.org/manga/4880/jojo-s-bizarre-adventure-part-8-jojolion">jojolion</a></li>
			<li><a href="https://mangadex.org/manga/350/vinland-saga">vinland saga</a></li>
			<li><a href="https://mangakakalot.com/manga/hgj2047065412">goblin slayer</a></li>
			<li><a href="https://mangakakalot.com/manga/goblin_slayer_side_story_year_one">goblin slayer: year one</a></li>
		</div>

		<div id="mail" class="links">
			<li><a href="https://gmail.com">gmail</a></li>
			<li><a href="https://mail.protonmail.com/inbox">protonmail</a></li>
			<li><a href="https://icloud.com">icloud</a></li>

		</div>
	</div>

	<div class="container-2">
		<div id="torrents" class="links">
			<li><a href="https://nyaa.si/">nyaa</a></li>
			<li><a href="https://forum.snahp.it/">snahp.it</a></li>
			<li><a href="https://reddit.com/r/megalinks/">megalinks</a></li>
		</div>

		<div>

		</div>

	</div>

</body>
</html>

最佳答案

从background-color: #404040;删除class="container-1"并将background和margin添加到.links



body{
	font-family:'Helvetica';
	float:center;
	background-color:#606060;
	background-image:url(images/image1.jpg);
	background-size:2048px 1152px;
	background-repeat:no-repeat;
}

a{
	text-decoration:none;
	color:#BF9553;
}

a:hover{
	color:white;
}

a:active{
	color:white;
}

a:visited{
	color:none;
}

#header{
	color:#BF9553;
	text-align:center;
	font-size:60px;
}

#clockbox{
	color:#BF9553;
	text-align:center;
	font-size:20px;
	margin-top:-75px;
	padding-bottom:25px;
}

.links{
border: 1px solid #2E2E2E;
padding: 10px;
list-style-type: none;
line-height: 1.6em;
align-content: center;
background-color: #404040;
margin: 3px;
}

.container-1{
	display:flex;
	width:550px;
	margin: 0 auto;
	justify-content:space-around;
}

#general{
	flex:1;
}

#manga{
	flex:1;
}

#mail{
	flex:1;
}

.container-2{
	background-color:#404040;
	display:flex;
	width:550px;
	margin: 0 auto;
}

#torrents{
	flex:1;
}

<!DOCTYPE html>
<html>
<head>
	<title>Startpage</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header>
		<div id="header">
			<h1>Hello, Kyle</h1>
		</div>
	<div id="clockbox"></div>

		<script type="text/javascript">
			function GetClock(){
			var d=new Date();
			var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear();
			var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds();
			if(nmin<=9) nmin="0"+nmin;
			if(nsec<=9) nsec="0"+nsec;

			var clocktext=""+ndate+"."+(nmonth+1)+"."+nyear+" "+nhour+":"+nmin+":"+nsec+"";
			document.getElementById('clockbox').innerHTML=clocktext;
			}

			GetClock();
			setInterval(GetClock,1000);
		</script>

	</div>
	</header>
	<div class="container-1">

		<div id="general" class="links">
			<li><a href="https://duckduckgo.com">duckduckgo</a></li>
			<li><a href="https://youtube.com/feed/subscriptions">youtube</a></li>
			<li><a href="https://netflix.com/browse">netflix</a></li>
			<li><a href="https://twitch.tv/directory/following">twitch</a></li>
			<li><a href="https://twitter.com">twitter</a></li>
			<li><a href="https://hulu.com">hulu</a></li>
		</div>

		<div id="manga" class="links">
			<li><a href="https://myanimelist.net">myanimelist</a></li>
			<li><a href="https://mangadex.org/manga/1054/it-s-not-my-fault-that-i-m-not-popular">watamote</a></li>
			<li><a href="https://mangadex.org/manga/4880/jojo-s-bizarre-adventure-part-8-jojolion">jojolion</a></li>
			<li><a href="https://mangadex.org/manga/350/vinland-saga">vinland saga</a></li>
			<li><a href="https://mangakakalot.com/manga/hgj2047065412">goblin slayer</a></li>
			<li><a href="https://mangakakalot.com/manga/goblin_slayer_side_story_year_one">goblin slayer: year one</a></li>
		</div>

		<div id="mail" class="links">
			<li><a href="https://gmail.com">gmail</a></li>
			<li><a href="https://mail.protonmail.com/inbox">protonmail</a></li>
			<li><a href="https://icloud.com">icloud</a></li>

		</div>
	</div>

	<div class="container-2">
		<div id="torrents" class="links">
			<li><a href="https://nyaa.si/">nyaa</a></li>
			<li><a href="https://forum.snahp.it/">snahp.it</a></li>
			<li><a href="https://reddit.com/r/megalinks/">megalinks</a></li>
		</div>

		<div>

		</div>

	</div>

</body>
</html>

关于html - 在仍然显示背景的情况下， flexbox 之间是否有空隙？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54500663/

10-09 15:22
Powered by LMLPHP ©2024 显示背景 0.048107