我如何将物品添加到我的LI物品中

kiwis 发表于 Dev

奇异果

.container {
  max-width: 1232px;
  min-width: 200px;
  margin: 0px auto;
  font-family: Tahoma, Geneva, sans-serif;
}
.grad {
  content: "";
  display: block;
  height: 8px;
  width: 100%;
  background: linear-gradient(45deg, rgb(133, 184, 1) 0px, rgb(26, 148, 189) 77%, rgb(26, 148, 189) 100%);
  margin-bottom: 3px;
}
ul {
  padding: 0px;
  margin: 0px;
}
.card {
  list-style: none;
  background-color: rgb(36, 43, 51);
  margin: 0px;
  padding-right: 1px;
  width: 175px;
  height: 250px;
  display: inline-block;
  margin-right: -5px;
  margin-top: -3px;
  border-bottom: 1px solid rgb(88, 95, 101);
  cursor: pointer;
}
.card:hover {
  background-color: rgb(0, 0, 0);
}
.card-block {
  margin-top: 50px;
  border-right: 1px solid rgb(88, 95, 101);
  width: 100%;
  height: 150px;
}
h2 {
  margin: 0px;
  padding: 0px;
}

<div class="container">
  <div class="grad"></div>
  <ul>
    <li class="card">
      <div class="card-block">
        <h2>Location</h2>
      </div>
    </li>
    <li class="card">
      <div class="card-block"></div>
    </li>
    <li class="card">
      <div class="card-block"></div>
    </li>
    <li class="card">
      <div class="card-block"></div>
    </li>
    <li class="card">
      <div class="card-block"></div>
    </li>
    <li class="card">
      <div class="card-block"></div>
    </li>
    <li class="card">
      <div class="card-block"></div>
    </li>
    <li class="card">
      <div class="card-block"></div>
    </li>
  </ul>

</div>

在添加之前，我的位置看起来还不错，但是现在它已经将我的第一个项目下推了吗？

我想在卡块div中写入几行不同的信息。

我不确定为什么插入后第一个LI会立即下降，或者为什么我也必须有-3px的余量

大傻瓜

使用＆上的position属性对其进行了修复.card.card-block

这是我的代码。

.container{
	max-width: 1232px;
	min-width:200px;
	margin:0px auto;
	font-family:Tahoma, Geneva, sans-serif;
  box-sizing: border-box;
}

.grad{
    content: "";
    display: block;
    height: 8px;
	width:100%;
    background: linear-gradient(45deg, rgb(133, 184, 1) 0px, rgb(26, 148, 189) 77%, rgb(26, 148, 189) 100%);
	margin-bottom:3px;
}

ul{
	padding:0px;
	margin:0px;
}

.card{
    position: relative;
    box-sizing: border-box;
	list-style:none;
	background-color: rgb(36, 43, 51);
    padding-right: 1px;
	width:175px;
	height:250px;
	display:inline-block;
	margin-right:-5px;
	margin-top:-3px;
	border-bottom: 1px solid rgb(88, 95, 101);
	cursor:pointer;
}

.card:hover{
	background-color: rgb(0, 0, 0);
}


.card-block{
    box-sizing: border-box;
	position: absolute;
    left: 20px;
	border-right: 1px solid rgb(88, 95, 101);
	width:100%;
	height:100%;
}

h2{
	margin:0px;
	padding:0px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
	<div class="grad"></div>
    <ul>
    	<li class="card"> 
        	<div class="card-block">
            	<h2>Location</h2>
         	</div>
        </li>
    	<li class="card"> <div class="card-block"></div></li>
    	<li class="card"> <div class="card-block"></div></li>
    	<li class="card"> <div class="card-block"></div></li>       
    	<li class="card"> <div class="card-block"></div></li>
    	<li class="card"> <div class="card-block"></div></li>
    	<li class="card"> <div class="card-block"></div></li>
    	<li class="card"> <div class="card-block"></div></li>                                          
    </ul>
    
</div> 
</body>
</html>