Có cách nào để điều chỉnh vị trí của list-style-image không?
Khi tôi sử dụng phần đệm cho các mục danh sách, hình ảnh sẽ giữ nguyên vị trí của nó và sẽ không di chuyển với phần đệm ...
Có cách nào để điều chỉnh vị trí của list-style-image không?
Khi tôi sử dụng phần đệm cho các mục danh sách, hình ảnh sẽ giữ nguyên vị trí của nó và sẽ không di chuyển với phần đệm ...
Câu trả lời:
Không hẳn vậy. Phần đệm của bạn (có thể) đang được áp dụng cho mục danh sách, do đó sẽ chỉ ảnh hưởng đến nội dung thực tế trong mục danh sách.
Sử dụng kết hợp các kiểu nền và đệm có thể tạo ra thứ gì đó trông tương tự, ví dụ:
li {
background: url(images/bullet.gif) no-repeat left top; /* <-- change `left` & `top` too for extra control */
padding: 3px 0px 3px 10px;
/* reset styles (optional): */
list-style: none;
margin: 0;
}
Bạn có thể đang tìm cách thêm kiểu dáng vào thùng chứa danh sách cha mẹ (ul) để định vị các mục danh sách dấu đầu dòng của bạn, bài viết A List Apart này có một tài liệu tham khảo bắt đầu tốt.
topgiá trị làm việc cho tôi thay vì đệm hàng đầu. background: url(images/bullet.gif) no-repeat left 8px;
Tôi thường ẩn kiểu kiểu danh sách và sử dụng hình nền, có thể di chuyển được
li
{
background: url(/Images/arrow_icon.gif) no-repeat 7px 7px transparent;
list-style-type: none;
margin: 0;
padding: 0px 0px 1px 24px;
vertical-align: middle;
}
"7px 7px" là thứ sắp xếp hình nền bên trong thành phần và cũng liên quan đến phần đệm.
Một giải pháp khả thi cho câu hỏi chưa được đề cập này là:
li {
position: relative;
list-style-type: none;
}
li:before {
content: "";
position: absolute;
top: 8px;
left: -16px;
width: 8px;
height: 8px;
background-image: url('your-bullet.png');
}
Bây giờ bạn có thể sử dụng đỉnh / trái của li: trước để định vị viên đạn mới. Lưu ý rằng chiều rộng và chiều cao của li: trước cần phải có cùng kích thước với hình nền bạn chọn. Điều này hoạt động trong Internet Explorer 8 trở lên.
Tôi có cùng một vấn đề, nhưng tôi không thể sử dụng tùy chọn nền (và không muốn sử dụng nhiều nền) vì vậy tôi đã nghĩ đến một giải pháp khác
đây là một ví dụ cho một menu có chỉ báo giống như hình vuông cho mục menu hiện hoạt / hiện tại (kiểu danh sách mặc định được đặt thành không trong quy tắc khác)
nav ul li.active>a:before{
content: "■";
position: absolute;
top: -22px;
left: 55px;
font-size: 33px;
}
nó tạo ra một hình vuông bằng cách sử dụng một ký tự hình vuông với lớp giả ": trước" và nó có thể định vị tự do bằng cách sử dụng định vị tuyệt đối.
Đây là những gì tôi đã làm để có được các khối màu xám nhỏ ở bên trái và ở giữa văn bản với độ sáng đường tăng:
line-height:200%;
padding-left:13px;
background-image:url('images/greyblock.gif');
background-repeat:no-repeat;
background-position:left center;Hy vọng điều này sẽ giúp được ai đó: D
Giải pháp cuối cùng tôi đã giải quyết là sửa đổi hình ảnh để thêm một số khoảng cách.
Sử dụng hình nền trên li như một số gợi ý hoạt động trong nhiều trường hợp nhưng không thành công khi danh sách được sử dụng cùng với hình ảnh nổi (ví dụ để lấy văn bản để bọc xung quanh hình ảnh).
Hi vọng điêu nay co ich.
Một tùy chọn khác bạn có thể làm, là:
li:before{
content:'';
padding: 0 0 0 25px;
background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}Sử dụng (0 3px) để định vị hình ảnh danh sách.
Hoạt động trong IE8 +, Chrome, Firefox và Opera.
Tôi sử dụng tùy chọn này bởi vì bạn có thể trao đổi kiểu danh sách một cách dễ dàng và rất có thể bạn thậm chí không phải sử dụng hình ảnh. (câu đố dưới đây)
http://jsfiddle.net/flashminddesign/cYAzV/1/
CẬP NHẬT:
Điều này sẽ chiếm cho văn bản / nội dung đi vào dòng thứ hai:
ul{
list-style-type:none;
}
li{
position:relative;
}
ul li:before{
content:'>';
padding:0 10px 0 0;
position:absolute;
top:0; left:-10px;
}Thêm phần đệm bên trái: vào li nếu bạn muốn có thêm khoảng trống giữa dấu đầu dòng và nội dung.
Hoặc bạn có thể sử dụng
list-style-position: inside;Tôi nghĩ rằng những gì bạn thực sự muốn làm là thêm phần đệm (bạn hiện đang thêm vào <li>) vào thẻ <ul> và sau đó các dấu đầu dòng sẽ di chuyển cùng với văn bản của <li>.
Ngoài ra còn có vị trí kiểu danh sách bạn có thể nhìn vào. Nó ảnh hưởng đến cách các đường bao quanh các hình ảnh viên đạn.
như câu trả lời "a darren" nhưng sửa đổi nhỏ
li
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}Nó hoạt động trên trình duyệt chéo, chỉ cần điều chỉnh phần đệm và lề
Chỉnh sửa cho lồng nhau: thêm kiểu này để thêm lề trái vào danh sách lồng nhau
ul ul {lề-trái: 15px; }
Tôi đang sử dụng một cái gì đó như thế này, có vẻ khá sạch sẽ và đơn giản đối với tôi:
ul {
list-style: none;
/* remove left padding, it's usually unwanted: */
padding: 0;
}
li:before {
content: url(icon.png);
display: inline-block;
vertical-align: middle;
/* If you want some space between icon and text: */
margin-right: 1em;
}Các mã trên hoạt động như trong hầu hết các trường hợp của tôi.
Để điều chỉnh chính xác, bạn có thể sửa đổi vertical-align, ví dụ:
vertical-align: top;
/* or */
vertical-align: -10px;
/* or whatever you need instead of "middle" */Bạn có thể thiết lập list-style: nonetrên lithay vì ulnếu bạn thích.
Tôi tìm thấy câu trả lời được chấp nhận một chút sai lầm, quá xa phải chen lấn với các lệnh đệm và css thêm.
Tôi không bao giờ thêm phần đệm vào danh sách các mục cá nhân, thông thường kiểm soát chiều cao dòng của chúng và lề thường xuyên là đủ.
Khi tôi gặp vấn đề căn chỉnh với hình ảnh kiểu danh sách tùy chỉnh, tôi chỉ cần thêm một pixel hoặc hai không gian thừa xung quanh bất kỳ phía nào được yêu cầu để điều chỉnh vị trí của nó so với từng dòng danh sách.
giải pháp với fontawgie
#polyNedir ul li { position:relative;padding-left:20px }
#polyNedir ul li:after{font-family:fontawesome;content:'\f111';position:absolute;left:0px;top:3px;color:#fff;font-size:10px;}Ẩn hình ảnh dấu đầu dòng mặc định và sử dụng background-imagevì bạn có nhiều quyền kiểm soát hơn như:
li {
background-image: url(https://material.io/tools/icons/static/icons/baseline-add-24px.svg);
background-repeat: no-repeat;
background-position: left 50%;
padding-left: 2em;
}
ul {
list-style: none;
}<ul>
<li>foo</li>
<li>bar</li>
</ul>My solution:
ul {
line-height: 1.3 !important;
li {
font-size: x-large;
position: relative;
&:before {
content: '';
display: block;
position: absolute;
top: 5px;
left: -25px;
height: 23px;
width: 23px;
background-image: url(../img/list-char.png) !important;
background-size: 23px;
background-repeat: no-repeat;
}
}
}
list-style-imagenếu nó không thể được định vị? Có vẻ như kết quả là hầu hết mọi người đang sử dụng cách giải quyết như thế::beforevàbackground-imagethay vào đó.