Question

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

在我添加我的位置之前看起来没问题，但它现在推了我的第一个项目？

我想在我的card-block div中写几行不同的信息。

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

Answer 1

使用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>

我也尝试抛出box-sizing: border-box;所以填充，边框和（我不知道边距？）不会影响其他元素的测量。

如何在LI项目中添加内容

1 个答案: