CSS Layout inline-block


CSS Layout inline-block

Hôm nay ta sẽ tìm hiểu về inline-block. Như ta đã biết inline thì ta không thể thêm width, height. Còn block thì thêm widtgh, height được nhưng mỗi block đều bắt đầu xuống hàng. Vậy nếu ta muốn vừa xét được width, height, và các thẻ phải nằm cạnh nhau không xuống hàng ta dùng inline-block. Ta xem ví dụ sau.

<style>
 a.myStyle1 {
   display: inline; /* a default is inline */
   background-color: yellow;
   width: 300px;
   height: 100px;
   padding: 0 30px;
   margin-bottom: 30px;
 }

 a.myStyle2 {
   display: block;
   background-color: tomato;
   color: black;
   width: 300px;
   height: 100px;
   padding: 0 30px;
   margin-bottom: 30px;
 }

 a.myStyle3 {
   display: inline-block;
   background-color: green;
   color: black;
   width: 300px;
   height: 100px;
   padding: 0 30px;
   margin-bottom: 30px;
 }


</style>

<a class="myStyle1" href="https://dblog24h.com">inline</a>
<a class="myStyle1"  href="https://dblog24h.com">inline</a>

<a  class="myStyle2" href="https://dblog24h.com">block</a>
<a class="myStyle2"  href="https://dblog24h.com">block</a>


<a class="myStyle3"  href="https://dblog24h.com">inline-block</a>
<a class="myStyle3" href="https://dblog24h.com">inline-block</a>

inline inline

block block

inline-block inline-block

Ta áp dụng kiến thức này tạo ra 1 navigation bar nhé. Xem ví dụ sau.

<style>
  ul.myNav {
    list-style-type: none;
    background-color: yellow;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 500px;
  }

  ul.myNav li {
    display: inline-block;
    padding: 20px;
  }

  ul.myNav li > a:hover {
   font-weight: bold;
   text-decoration: underline;
   font-size: 30px;
  }
</style>

<ul class="myNav">
 <li><a href="/">Home</a></li>
 <li><a href="/about">About</a></li>
 <li><a href="/contact">Contact</a></li>
</ul>

Như vậy ta đã biết cách dùng inline-block rồi nhé. ^_^