Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width,init-scale=1"> <link rel="stylesheet" href= "https://www.example.com.vn/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>Kích thước thanh điều hướng</h2> <p>Tùy chỉnh độ rộng của danh sách các mục có thuộc tính chiều rộng (Lưu ý: trên màn hình nhỏ hơn, chúng sẽ chuyển đổi thành 100%):</p> <p>Mặc định có hai mục:</p> <div class="w3-bar w3-border w3 -light-grey"> <a href="#" class="w3-bar-item w3-button w3-mobile w3-green">Liên kết 1</a> <a href="#" class="w3- bar-item w3-button w3-mobile">Liên kết 2</a> </div> <p>Hai mục, được tùy chỉnh:</p> <div class="w3-bar w3-border w3-light-grey" > <a href="#" style="width:50%" class="w3-bar-item w3-button w3-mobile w3-green">Liên kết 1</a> <a href="#" style= "width:50%" class="w3-bar-item w3-button w3-mobile">Liên kết 2</a> </div> <p>Hai mục <strong>giữa:</strong></p> <div class="w3-bar w3-border w3-light-grey w3-center"> <a href="#" style="width:50%" class="w3-bar-item w3-button w3-mobile w3-green">Liên kết 1</a> <a href="#" style="width:50%" class="w3-bar-item w3-button w3-mobile">Liên kết 2</a> </ div> <p>Ba mục:</p> <div class="w3-bar w3-border w3-light-grey"> <a href="#" style="width:33.33%" class="w3- bar-item w3-button w3-mobile w3-green">Liên kết 1</a> <a href="#" style="width:33.33%" class="w3-bar-item w3-button w3-mobile" >Liên kết 2</a> <a href="#" style="width:33.33%" class="w3-bar-item w3-button w3-mobile">Liên kết 3</a> </div> <p >Ba mục <strong>được căn giữa:</strong></p> <div class="w3-bar w3-border w3-light-grey w3-center"> <a href="#" style="width:33.33 %" class="w3-bar-item w3-button w3-mobile">Liên kết 1</a> <a href="#" style="width:33.33%" class="w3-bar-item w3-button w3-mobile">Liên kết 2</a> <a href="#" style="width:33.33%" class="w3-bar-item w3-button w3-mobile">Liên kết 3</a> </ div> <p>Bốn mục:</p> <div class="w3-bar w3-border w3-light-grey w3-center"> <a href="#" style="width:25%" class= "w3-bar-item w3-button w3-mobile">Liên kết 1</a> <a href="#" style="width:25%" class="w3-bar-item w3-button w3-mobile" >Liên kết 2</a> <a href="#" style="width:25%" class="w3-bar-item w3-button w3-mobile">Liên kết 3</a> <a href="# " style="width:25%" class="w3-bar-item w3-button w3-mobile">Liên kết 4</a> </div> <p>Năm mục:</p> <div class=" w3-bar w3-border w3-light-grey w3-center"> <a href="#" style="width:20%" class="w3-bar-item w3-button w3-mobile">Liên kết 1< /a> <a href="#" style="width:20%" class="w3-bar-item w3-button w3-mobile">Liên kết 2</a> <a href="#" style=" width:20%" class="w3-bar-item w3-button w3-mobile">Liên kết 3</a> <a href="#" style="width:20%" class="w3-bar-item w3-button w3-mobile">Liên kết 4</a> <a href="#" style="width:20%" class="w3-bar-item w3-button w3-mobile">Liên kết 5</a > </div> <p>Sáu mục:</p> <div class="w3-bar w3-border w3-light-grey w3-center"> <a href="#" style="width:16.66% " class="w3-bar-item w3-button w3-mobile">Liên kết 1</a> <a href="#" style="width:16.66%" class="w3-bar-item w3-button w3 -mobile">Liên kết 2</a> <a href="#" style="width:16.66%" class="w3-bar-item w3-button w3-mobile">Liên kết 3</a> <a href ="#" style="width:16.66%" class="w3-bar-item w3-button w3-mobile">Liên kết 4</a> <a href="#" style="width:16.66%" lớp ="w3-bar-item w3-button w3-mobile">Liên kết 5</a> <a href="#" style="width:16.66%" class="w3-bar-item w3-button w3-mobile ">Liên kết 6</a> </div> <p>Các ví dụ khác:</p> <div class="w3-bar w3-border w3-light-grey w3-center"> <a href="#" style="width:50%" class="w3-bar-item w3-button w3-mobile">Liên kết</a> <a href="#" style="width:12.5%" class="w3-bar -item w3-button w3-mobile">Liên kết</a> <a href="#" style="width:12.5%" class="w3-bar-item w3-button w3-mobile">Liên kết</a > <a href="#" style="width:12.5%" class="w3-bar-item w3-button w3-mobile">Liên kết</a> <a href="#" style="width:12.5 %" class="w3-bar-item w3-button w3-mobile">Liên kết</a> </div> <br> <div class="w3-bar w3-border w3-light-grey w3-center" > <a href="#" style="width:16.66%" class="w3-bar-item w3-button w3-mobile">Liên kết</a> <a href="#" style="width:66.66 %" class="w3-bar-item w3-button w3-mobile">Liên kết</a> <a href="#" style="width:16.66%" class="w3-bar-item w3-button w3 -mobile">Liên kết</a> </div> <br> <div class="w3-bar w3-border w3-light-grey w3-center"> <a href="#" style="width:16.66 %" class="w3-hide-small"> <a href="#" style="width:16.66%" class="w3-bar-item w3-button w3-mobile">Liên kết</a> <a href="#" style="width:16.66%" class="w3-bar-item w3-button w3-mobile">Liên kết</a> <a href="#" style="width:16.66%" lớp ="w3-bar-item w3-button w3-mobile">Liên kết</a> <a href="#" style="width:16.66%" class="w3-bar-item w3-button w3-mobile" >Liên kết</a> <a href="#" style="width:16.66%" class="w3-hide-small"> </div> </div> </body> </html>