리스트 스타일 이미지 위치를 조정하시겠습니까?
리스트 스타일 이미지의 위치를 조정하는 방법이 있습니까?
목록 항목에 패딩을 사용하면 이미지가 위치를 유지하고 패딩과 함께 이동하지 않습니다...
사실 그렇지 않아요.목록 항목에 패딩이 적용되고 있으므로 목록 항목 내의 실제 내용에만 영향을 미칩니다.
배경 스타일과 패딩 스타일의 조합을 사용하면 유사한 모양을 만들 수 있습니다.
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;
}
글머리표 목록 항목을 배치하기 위해 상위 목록 컨테이너(ul)에 스타일을 추가하려고 할 수 있습니다. 이 A List Apart 기사는 시작 참조가 좋습니다.
나는 보통 목록 스타일 타입을 숨기고 이동이 가능한 배경 이미지를 사용합니다.
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"는 요소 내부의 배경 이미지를 정렬하는 것이며 패딩과 관련이 있습니다.
아직 언급되지 않은 이 질문에 대한 가능한 해결책은 다음과 같습니다.
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');
}
이제 새 탄환을 배치하기 전에 li:의 상단/왼쪽을 사용할 수 있습니다.li:이전의 너비와 높이는 선택한 배경 이미지와 동일한 치수여야 합니다.이것은 Internet Explorer 8 이상에서 작동합니다.
저도 같은 문제가 있었는데 백그라운드 옵션을 사용할 수 없어서(여러 백그라운드를 사용하고 싶지 않아서) 다른 해결책을 생각했습니다.
활성/현재 메뉴 항목에 대해 사각형 모양 지시자가 있는 메뉴의 예입니다(기본 목록 스타일은 다른 규칙에서 없음으로 설정됨).
nav ul li.active>a:before{
content: "■";
position: absolute;
top: -22px;
left: 55px;
font-size: 33px;
}
":before" 의사 클래스가 있는 정사각형 문자를 사용하여 정사각형을 만들고 절대 위치 지정을 사용하여 자유롭게 위치를 지정할 수 있습니다.
다음은 작은 회색 블록을 텍스트의 왼쪽과 중앙에 선 높이를 늘린 것입니다.
line-height:200%;
padding-left:13px;
background-image:url('images/greyblock.gif');
background-repeat:no-repeat;
background-position:left center;
누군가에게 도움이 되길 바랍니다 :D
저는 이런 것을 사용하고 있는데 꽤 깨끗하고 간단한 것 같습니다.
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;
}
위 코드는 대부분의 경우와 마찬가지로 작동합니다.
는 Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ,vertical-align :
vertical-align: top;
/* or */
vertical-align: -10px;
/* or whatever you need instead of "middle" */
ㅇㅇ을 설정할 수 .list-style: none위에li에 대신에ul
결국 제가 정한 해결책은 이미지 자체를 수정하여 띄어쓰기를 추가하는 것이었습니다.
일부에서 제안하는 바와 같이 리에 배경 이미지를 사용하면 많은 경우 작동하지만 목록이 플로팅 이미지와 함께 사용될 때는 실패합니다(예: 텍스트로 이미지를 둘러싸도록 하는 경우).
도움이 되길 바랍니다.
또 다른 옵션은 다음과 같습니다.
li:before{
content:'';
padding: 0 0 0 25px;
background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}
(03px)를 사용하여 목록 이미지를 배치합니다.
IE8+, Chrome, Firefox 및 Opera에서 작동합니다.
목록 스타일을 쉽게 바꿀 수 있고 이미지를 전혀 사용할 필요가 없을 가능성이 높기 때문에 이 옵션을 사용합니다. (아래 fiddle)
http://jsfiddle.net/flashminddesign/cYAzV/1/
업데이트:
두 번째 줄에 들어가는 텍스트/내용을 설명합니다.
ul{
list-style-type:none;
}
li{
position:relative;
}
ul li:before{
content:'>';
padding:0 10px 0 0;
position:absolute;
top:0; left:-10px;
}
padding-left: 글머리판과 내용 사이에 더 많은 공간을 원하는 경우 li에 추가합니다.
http://jsfiddle.net/McLeodWebDev/wfzwm0zy/
아니면 사용해도 좋습니다.
list-style-position: inside;
당신이 정말로 하고 싶은 것은 <u> 태그에 패딩(현재 <li>에 추가하고 있는)을 추가하면 <li>의 텍스트와 함께 총알 포인트가 이동할 것이라고 생각합니다.
여러분이 살펴볼 수 있는 리스트 스타일의 포지션도 있습니다.이는 선이 총알 이미지를 둘러싸는 방식에 영향을 미칩니다.
"대런"이라는 대답처럼 하지만 사소한 수정.
li
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}
브라우저를 통해 작동합니다. 패딩과 마진만 조정하면 됩니다.
중첩된 경우 편집: 이 스타일을 추가하여 하위 중첩 목록에 여백 왼쪽 추가
ul{ margin-left:15px; }
ul {
/* Remove default list icon */
list-style: none;
padding: 0;
/* Small width and margin to demonstrate the text wrapping */
width: 200px;
border:1px solid red;
}
li{
/* Make sure the text is properly wrpped (not spilling in the image area) */
display: flex;
}
li:before {
content: url(https://via.placeholder.com/10/0000FF/808080/?text=*);
display: inline-block;
vertical-align: middle;
/* If you want some space between icon and text: */
margin-right: 2em;
}
나는 수용된 답변이 약간 얼떨떨하다고 생각합니다. 너무도 추가 패딩과 CSS 명령어를 가지고 장난을 쳐야 합니다.
저는 개인적으로 아이템 목록에 패딩을 추가하지 않습니다. 보통은 라인 높이를 조절하고 가끔 여유가 있으면 충분합니다.
사용자 지정 목록 스타일 이미지의 정렬 문제가 발생하면 각 목록 선에 대한 위치 조정을 위해 필요한 모든 면에 픽셀 또는 두 개의 여유 공간을 추가합니다.
폰트가 있는 해결책
#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;}
기본 글머리 기호 이미지 숨기기 및 사용background-image다음과 같이 훨씬 더 많은 통제력을 확보할 수 있습니다.
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;
}
}
}또 다른 해결책은 단지 다음을 설정하는 것입니다.li에 항목.flex아니면inline-flex에게 더잘 .. 당신에게 더 적합할 수 있는 상황에 따라.HTML에 실제 아이콘/이미지가 있는 경우 기본 플렉스 위치는 중앙 수평 라인에 있습니다.
또 다른 해결 방법:이미지 대신 내용의 위치를 조정합니다.
방법 : 리의 내용물을 position=diples and top={wanted you want}의 div에 넣습니다.
<li>
<div style="position: relative; top: -3px">{Contents}</div>
</li>
Li에 몇 줄의 컨텐츠가 있든 상관없이 항상 이미지의 중심을 잡을 수 있는 또 다른 솔루션은 다음과 같습니다.
li {
list-style-type: none;
display: flex;
align-items: center;
gap: 10px;
}
li::before {
content: "";
background-image: url("../your-path/image.png");
background-repeat: no-repeat;
background-size: contain;
height: 20px;
width: 20px;
min-height: 20px;
min-width: 20px;
}
언급URL : https://stackoverflow.com/questions/1708833/adjust-list-style-image-position
'programing' 카테고리의 다른 글
| XML 레이아웃에서 조각을 선언하는 경우 번들을 전달하려면 어떻게 해야 합니까? (0) | 2023.09.13 |
|---|---|
| IE9에서 이진 데이터를 읽는 방법? (0) | 2023.09.13 |
| 유연한 배열 부재로 구조를 초기화하는 방법 (0) | 2023.09.13 |
| 펫클리닉보다 더 큰 오픈소스 스프링 샘플 프로젝트가 있습니까? (0) | 2023.09.13 |
| Android 응용 프로그램에서 텍스트 뷰의 첫 글자를 대문자로 쓰는 방법 (0) | 2023.09.13 |