问题描述:

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

网友答案:

Fixed it with position property on .card & .card-block

Here is my code.

.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>
相关阅读:
Top