[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 中打開示例