Css ul li nội tuyến

Vì vậy, với

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

2, điểm khác biệt chính là

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

3 cho phép thiết lập chiều rộng và chiều cao trên phần tử

Ngoài ra, với

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

3, margins/paddings top and bottom được coi trọng, nhưng với

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

2 thì không

So với

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

6, sự khác biệt chính là

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

3 không thêm dấu ngắt dòng sau phần tử, vì vậy phần tử có thể cạnh các phần tử khác

Ví dụ sau đây để thấy các hành động khác nhau của

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

2,

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

3 và hiển thị. chặn

Ví dụ

span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

Sử dụng inline-block để tạo liên kết điều hướng

Một cách sử dụng biến phổ biến cho

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

3 là hiển thị các mục trong danh sách theo chiều ngang thay vì chiều dọc. Ví dụ sau khi tạo liên kết điều hướng ngang

Một cách khác để tạo thanh điều hướng ngang là thay đổi phần tử li và xác định bố cục cục bộ cho liên kết điều hướng

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Giải thích ví dụ

• 
  li {
    float: left;
  }
  
  a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
  }
  

  2 – Sử dụng float để đặt các phần tử khối trượt cạnh nhau

• 
  li {
    float: left;
  }
  
  a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
  }
  

  3 – Cho phép chúng tôi xác định phần đệm (và chiều cao, chiều rộng, lề, … nếu bạn muốn)

• 
  li {
    float: left;
  }
  
  a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
  }
  

  4 – Vì các phần tử khối chiếm toàn bộ chiều rộng có sẵn, chúng không thể trượt bên cạnh nhau. Vì vậy, chỉ định một số đệm để làm cho chúng trông đẹp mắt hơn

• 
  li {
    float: left;
  }
  
  a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
  }
  

  5 – Thêm màu nền xám vào mỗi phần tử

Mẹo: Thêm màu nền vào

thay vì mỗi phần tử nến bạn muốn màu nền toàn bộ chiều rộng:

ul {
  background-color: #dddddd;
}

Ví dụ về thanh điều hướng ngang

Tạo một thanh điều hướng ngang cơ bản với màu nền tối và thay đổi màu nền với các liên kết khi người dùng di chuyển chuột qua chúng

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Thay đổi màu liên kết thành #111 (black) khi di chuột */
li a:hover {
  background-color: #111;
}

Liên kết điều hướng hiện tại/hoạt động

Thêm lớp “hoạt động” vào đường dẫn hiện tại để người dùng biết họ đang xem trên các liên kết nào



________số 8

Căn phải liên kết

Căn phải liên kết bởi floating để liên kết nằm ở phía bên tay phải (

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

6)


li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

0

Thêm đường viền vào các liên kết điều hướng

Thêm thuộc tính

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

7 vào
• để tạo phân chia liên kết:
  

  
  li {
    float: left;
  }
  
  a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
  }
  

  2

  Thanh điều hướng cố định

  Đặt thanh điều hướng ở đầu hoặc cuối trang, ngay cả khi người dùng cuộn trang.
  

  
  
  Cố định trên cùng

  
  li {
    float: left;
  }
  
  a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
  }
  

  3

  Đáy cố định

  
  li {
    float: left;
  }
  
  a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
  }
  

  4

  Lưu ý. Ví dụ về khả năng không hoạt động bình thường trên thiết bị di động

  Thanh điều hướng màu xám

  Ví dụ về thanh điều hướng ngang màu xám với đường viền sáng màu xám
  

  

  
  li {
    float: left;
  }
  
  a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
  }
  

  5

  Thanh điều hướng cố định

  Thêm

  
  li {
    float: left;
  }
  
  a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
  }
  

  8 vào
  Một phần tử cố định được chuyển đổi giữa tương đối và cố định, tùy thuộc vào vị trí cuộn. Nó được xác định vị trí tương đối khi một vị trí bù trừ nhất định được trả lời trong các khung – sau đó nó “nhìn” vào vị trí (như vị trí. đã sửa).

  
  li {
    float: left;
  }
  
  a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
  }
  

  0

  Lưu ý. Internet Explorer không hỗ trợ định vị trí. Safari request money -webkit- (xem ví dụ ở trên). Bạn phải chỉ định ít nhất một trong các vị trí

  
  li {
    float: left;
  }
  
  a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
  }
  

  9,

  
  ul {
    background-color: #dddddd;
  }
  

  0,

  
  ul {
    background-color: #dddddd;
  }
  

  1 hoặc

  
  ul {
    background-color: #dddddd;
  }
  

  2 để định vị trí hoạt động cũng được