Chia sẻ kinh nghiệm,  Web

Lưu ý với thẻ < ul > và < li > trong HTML coding

Thẻ <li> dùng để liệt kê 1 danh sách các đề mục, Thẻ <li> được nằm trong thẻ <ol> khi sắp xếp có thứ tự hoặc trong thẻ <ul> khi sắp xếp không thứ tự. Trước khi dùng nên reset lại các thuộc tính mặc định của nó để dể dàng kiểm soát khoảng cách giữa nó với các thành phần liên quan.

Reset các thuộc tính bởi: margin : 0; padding : 0;…

Khi dùng thẻ <li> nếu ta muốn dùng các thuộc tính như list-style, list-style-position. Để tạo icon đầu dòng thì không dùng thuộc tính height chung với nó. Nếu dùng chung sẽ gây ra lỗi hiển thị ở trình  duyệt IE7. Trường hơp muốn tăng khoảng cách dòng giữa 2 <li> thì có thể dùng padding-toppadding-bottom.

Một ví dụ khi thiết lập CSS cho thẻ <ul> và <li>

.col1_paragh1 ul li {  border-bottom:#FFFFFF 1px dashed; padding:10px 3px 10px 15px; list-style:square;  list-style-position:inside}
.col1_paragh1 ul li a { color:#767676; text-decoration:none}
.col1_paragh1 ul li a:hover { color:#CC0000}


Gửi bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *