Question

我只使用html和css对网页进行编码，而我在使用css中放置div标签时遇到问题这是我想要的输出：Image

问题是我无法将这些物品放在图像中的位置。这是我的代码：

＆＃13;

body{
	background-color: red;
}
#container{
  	background-image: url(http://uupload.ir/files/16md_background.jpg);
  	width: 1366px;
	height: 768px;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	border-radius: 2px;
}
#header{
	background-image: url(http://uupload.ir/files/8sr2_header.png);
	width:1366px;
	height:77px;
	position: absolute;
	top: 22px;
	left: 170px;

}

#webdesign{
	background-image: url(http://uupload.ir/files/k11n_untitled-1.png);
	width: 308px;
	height: 308px;
}
#bannerdeisgn{
	background-image: url(http://uupload.ir/files/k11n_untitled-1.png);
	width: 308px;
	height: 308px;
}
#logodesign{
	background-image: url(http://uupload.ir/files/k11n_untitled-1.png);
	width: 308px;
	height: 308px;
}
#carddesign{
	background-image: url(http://uupload.ir/files/k11n_untitled-1.png);
	width: 308px;
	height: 308px;
}
#nav li{
	list-style-type: none;
	position: absolute;

}
#home{
	background-image: url(http://uupload.ir/files/orek_home.png);
	width:32px;
	height:35px;
	position: absolute;
	right: 100px;
}
#home {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
#home:hover, #home:focus, #home:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
#footer{
	background-image: url(http://uupload.ir/files/ywc_footer.png);
	width: 1366px;
	height: 77px;
	float: left;
	position: absolute;
	top: 712px;
	left: 170px;
}

＆＃13;

<html>
<head>
	<title>test</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<!---\\\\\\\\\\\\\\\\\\\\\\\\\\/////////////////////////////-->
	<!---\\\\\\\\\\\\\\\\\\\\\\\\\\/////////////////////////////-->
</head>
<body>
<div id="container"></div>
<div id="header"></div>
<div id="home"></div>
<div id="bg"></div>
<ul id="nav">
	<a href="#"><li id="bannerdeisgn"></li></a>
	<a href="#"><li id="logodesign"></li></a>
	<a href="#"><li id="carddesign"></li></a>
	<a href="#"><li id="webdesign"></li></a>
</ul>
<div id="footer"></div>
</div>
</body>
</html>

＆＃13;

Answer 1

将display:inline-block添加到li并删除position: absolute

#nav li{
    list-style-type: none;
  display: inline-block;
  background: #000;
  border-radius:200px
}

<强> Demo

虽然不建议以盲目的方式提供帮助，但这里 Demo 2 Updated

如何在css3中放置项目？

1 个答案: