LI를 사용하지 않고 글머리 기호로 LI를 다시 생성하는 CSS

StackOverflow https://stackoverflow.com/questions/1123393

  •  13-09-2019
  •  | 
  •  

문제

글머리 기호가 있는 LI처럼 보이는 레이아웃을 만들려고 하는데 LI를 사용하지 않습니다.동일한 목록의 여러 항목이 서로 다른 글머리 기호 이미지를 갖도록 허용하고 싶기 때문에 LI를 사용할 수 없습니다.그리고 제가 알 수 있는 바에 따르면 LI 글머리 기호 스타일은 UL에서만 설정할 수 있으므로 동일한 UL의 모든 LI는 동일한 글머리 기호 이미지를 가져야 합니다.그리고 나는 그것을 원하지 않습니다.LI의 스타일 지정 방법에 대해 제가 틀렸다면 정정해 주십시오.

다음은 LI 글머리 기호를 다시 생성하도록 스타일을 지정하려는 HTML입니다.

<div><img src="..."/><p>Inbox:</p></div>

다음 목표를 달성하는 최선의 방법이 무엇인지 잘 모르겠습니다.

  • 항목 텍스트 상자 왼쪽에 글머리 기호 이미지를 표시하여 텍스트가 많을 때 글머리 기호가 왼쪽 여백에 표시되도록 합니다.텍스트는 글머리 기호 이미지 아래로 넘어가서는 안 됩니다.
  • 글머리 기호 이미지를 텍스트의 첫 번째 줄 중앙에 맞춰 유지합니다(텍스트 줄 바꿈의 경우).텍스트 크기가 변경되면 글머리 기호를 가운데 정렬로 유지하세요.

내 높은 수준의 목표는 다시 만드는 것입니다. TaskPaper의 웹페이지의 UI:

제가 가장 좋아하는 솔루션을 가진 사람에게 무료 라이센스를 기꺼이 제공하겠습니다.

감사해요,

제시

도움이 되었습니까?

해결책

CSS 클래스를 사용하여 다음을 수행 할 수 있습니다. 

<HTML>
  <HEAD>
    <STYLE>
      LI.circle { list-style: circle }
      LI.square { list-style: square }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI class="circle">Circle</LI>
      <LI class="square">Square</LI>
      <LI>Third</LI>
  </BODY>       
</HTML>

임의의 이미지가 필요한 경우 LI.whatever { list-style: url(myimage.png) }

다른 팁

당신은 사용할 수 있습니다 기간 대안으로

<span><img src="">text</img></span>

또는 사용할 수 있습니다 기본 UL 하지만 함께 각 Li에 대한 다른 이미지

<ul>
<li><img src="image1">text1</img></li>
<li><img src="image2">text2</img></li>
</ul>

그런 다음 CSS를 사용하여 Li에서 각 이미지의 여백을 정렬합니다.

li img{margin-left: 5px}

그래, 그런 것

목록 스타일 유형을 사용할 수도 있습니다 : 없음; 그런 다음 배경 이미지를 사용하십시오

목록을 만들고 싶지 않고 링크에 총알을 넣어야한다면 다음과 같이 만들 수 있습니다.

<a id="bulletlink" href="">hey</a>

CSS는 다음과 같습니다.

bulletlink{
background-image:url(../some/bullet.png) 0px 6px no-repeat;
padding-left:10px;
}

이미지는 투명한 배경으로 8px x 8px의 단순한 검은 색 원이며 앵커 나 텍스트에 패딩을 제공하여 총알이 겹치지 않습니다. 분명히 DIV, 이미지, 텍스트, 헤더 등을 포함한 거의 모든 것을 위해이 작업을 수행 할 수 있습니다. 배경 이미지를 넣을 수 있어야합니다.

@Dels - IMG가 포함된 LI를 사용하는 예제는 각 이미지 앞에 LI 요소를 계속 사용하고 있기 때문에 실제로 작동합니다.효과는 다음과 같습니다

  • <\img> 물건
  • <\diff img> 더 많은 내용

여전히 일반 글머리 기호 스타일을 사용하지만 그 옆에 이미지가 있습니다.나는 당신이 그것을 이미지로 여백하여 덮으려고 노력했다고 생각합니다. 그러나 그것이 작동한다면, 나는 확신조차 할 수 없지만 음의 왼쪽 여백을 사용해야 할 것이라고 믿습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top