목록 스타일 이미지 위치를 조정 하시겠습니까?

169

목록 스타일 이미지의 위치를 ​​조정하는 방법이 있습니까?

목록 항목에 패딩을 사용하면 이미지가 그 위치에 머무르고 패딩과 함께 움직이지 않습니다 ...

css  image  html-lists 
— 만족스러운
소스
1
CSS 사양에 포함되지 않은 것은 너무 나쁩니다. list-style-image위치를 잡을 수 없다면 어떤 점입니까 ? 이 결과로 대부분의 사람들이 같은 해결 방법을 사용하는 것으로 보인다 ::before및 background-image대신.
— Mentalist

답변:

205

실제로는 아닙니다. 패딩이 목록 항목에 적용되고 있으므로 목록 항목 내의 실제 내용에만 영향을 미칩니다.

배경 과 패딩 스타일 의 조합을 사용하면 비슷한 모양을 만들 수 있습니다.

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)를 스타일링 추가 할 찾고 될 수있다, 이것을 목록 외에도 기사는 좋은 시작 참조가 있습니다.

— 대런
소스
1
이렇게하면 목록 스타일이 일반 목록 항목보다 약간 오른쪽에 배치됩니다. 아래에 일반 항목이있는 경우 "끄기"입니다. 독립 솔루션을 모르지만 이미지 너비에 따라 다음과 같이 개선됩니다. "여백 : 0 0 -7px;"
— e-motiv
상단 위치 지정 top의 경우 상단 패딩 대신 값 변경이 효과적이었습니다. background: url(images/bullet.gif) no-repeat left 8px;
— Sridhar Katakam
리스트 스타일을 직접 스타일링 할 수없는 것은 부끄러운 일입니다. 사람들이 모든 종류의 해결 방법을 사용하도록합니다. 나는 정말로 목록 스타일 인 것을 위해 목록 스타일을 사용하고 싶지만, 내가 원하는 방식으로 보이게 할 수는 없다.
— mcv
75

나는 일반적으로 목록 스타일 유형을 숨기고 움직일 수있는 배경 이미지를 사용합니다.

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"는 요소 내부의 배경 이미지를 맞추고 패딩과 관련이 있습니다.

— NickGPS
소스
21

아직 언급되지 않은이 질문에 대한 가능한 해결책은 다음과 같습니다.

    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 이상에서 작동합니다.

— 라몬 드 예수
소스
이것은 내 의견으로는 최고의 솔루션입니다. :: before pseudo-element를 왼쪽으로 띄우면 동일한 효과를 얻을 수 있습니다.
— TaylorMac
12

나는 같은 문제가 있었지만 배경 옵션을 사용할 수 없었고 (배경을 여러 개 사용하고 싶지 않았습니다) 다른 해결책을 생각했습니다.

이것은 활성 / 현재 메뉴 항목에 대한 사각형 표시기가있는 메뉴의 예입니다 (기본 규칙 스타일은 다른 규칙에서 none으로 설정 됨)

nav ul li.active>a:before{
    content: "■";
    position: absolute;
    top: -22px;
    left: 55px;
    font-size: 33px;

}

": before"의사 클래스와 함께 사각형 문자를 사용하여 사각형을 만들고 절대 위치 지정을 사용하여 자유롭게 위치를 지정할 수 있습니다.

— 젊은이
소스
8

작은 회색 블록을 줄 높이가 증가하여 텍스트의 왼쪽과 중앙에 배치하기 위해 수행 한 작업은 다음과 같습니다.

line-height:200%;
padding-left:13px;
background-image:url('images/greyblock.gif');
background-repeat:no-repeat;
background-position:left center;

이것이 누군가를 돕기를 바랍니다 : D

— 케드
소스
6

마지막에 해결 한 해결책은 이미지 자체를 수정하여 간격을 추가하는 것이 었습니다.

일부 제안으로 li에 배경 이미지를 사용하면 많은 경우에 작동하지만 부동 이미지와 함께 목록을 사용하면 (예 : 텍스트가 이미지를 감싸도록) 실패합니다.

도움이 되었기를 바랍니다.

— 제드
소스
6

다른 옵션은 다음과 같습니다.

li:before{
    content:'';
    padding: 0 0 0 25px;
    background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}

(0 3px)를 사용하여 목록 이미지를 배치하십시오.

IE8 +, Chrome, Firefox 및 Opera에서 작동합니다.

목록 스타일을 쉽게 바꿀 수 있고 이미지를 전혀 사용하지 않아도 될 가능성이 있기 때문에이 옵션을 사용합니다. (아래 바이올린)

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 :를 추가하십시오.

http://jsfiddle.net/McLeodWebDev/wfzwm0zy/

— McLeodWebDev
소스
1
업데이트 된 버전은 추가 라인 JSfiddle을
— McLeodWebDev
3

실제로 원하는 것은 패딩 (현재 <li>에 추가하고 있음)을 <ul> 태그에 추가하면 글 머리 기호가 <li>의 텍스트와 함께 이동하는 것입니다.

당신이 볼 수있는 목록 스타일 위치도 있습니다. 선이 글 머리 기호 이미지를 둘러싸는 방식에 영향을줍니다.

3

"대런"과 같은 답변이지만 약간의 수정

li 
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}

크로스 브라우저에서 작동하며 패딩과 여백을 조정하면됩니다.

중첩에 대한 편집 : 하위 중첩 목록에 여백 왼쪽을 추가하려면이 스타일을 추가하십시오.

ul ul {margin-left : 15px; }

— khaled_webdev
소스
3

나는 이와 같은 것을 사용하고 있는데, 꽤 깨끗하고 단순 해 보입니다.

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당신이 원하는 경우.

— jj
소스
0

허용 된 답변이 약간의 퍼지이며, 추가 패딩 및 CSS 명령으로 혼동해야합니다.

필자는 개인적으로 항목을 나열하기 위해 패딩을 추가하지 않으며 일반적으로 줄 높이를 제어하며 가끔 여유가 충분합니다.

사용자 정의 목록 스타일 이미지와 정렬 문제가있을 때 각 목록 행을 기준으로 위치를 조정하는 데 필요한면 주위에 픽셀 한두 개를 추가하면됩니다.

— 아담 존스
소스
크로스 브라우저 렌더링을 다룰 필요가 없었습니까?
— Volker E.
0

fontawesome 솔루션

#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;}
— 파티 토쿠
소스
0

기본 글 머리 기호 이미지를 숨기고 다음과 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>
스 니펫 확장

— 로니 로이스 턴
소스
0 

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;
        }
    }
}
스 니펫 확장

— 바르트와 미에 쿠키 니아
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.