[css] margin-left 为负值的应用

margin-left 为负值的应用

按钮组中双边框隐藏

要点：按钮设置为浮动，按钮组中非第一个按钮设置为向左浮动边框的距离

<style type="text/css">
.btn {
  padding: 6px 12px;
  border: 1px solid #ccc;
  display: inline-block;
  vertical-align: middle;
  float: left;
}
.btn-group .btn + .btn {
  margin-left: -1px;
}
</style>
<div class="btn-group">
  <div class="btn first">这是我的</div><div class="btn">这是我的</div> 
</div>

[]

两端对齐

<style type="text/css">
* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}
.parent {
  width: 780px;
  margin: 20px auto;
  border: 1px solid #ddd;
  position: relative;
  overflow: hidden;
}


.parent ul {
  overflow: hidden;
  margin-left: -20px;
  margin-top: -20px;
}

.parent li {
  float: left;
  width: 180px;
  height: 240px;
  background: #f90;
  margin: 20px 0 0 20px;
}
</style>
 <div class="parent">
   <ul>
      <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
   </ul>
 </div>

在 jsrun 中打开示例