는 방법을 디스플레이에는 순서 없는 목록으로 인라인 총알?

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

  •  09-06-2019
  •  | 
  •  

문제

내가 있는 html 파일을 순서 없는 목록입니다.을 보여주고 싶은 목록 항목에 수평으로 하지만 여전히 유지합니다.중 때마다,나는 스타일을 설정하는 인라인을 만나는 수평 요구가 있을 수 있는 총알을 표시합니다.

도움이 되었습니까?

해결책

최고의 옵션을 본 다른 답변에서 사용하는 것이 었 float:left;.불행하게도,그것은 작동하지 않 IE7 는 요구 사항기* —당신은 여전히 잃습니다.나는 정말 예리한 사용에는 배경 이미지 중 하나.

을 할 대신(는 사람도 없고 제안했고,따라서 자 답)수동으로 추가 • 내 html 이 아닌 스타일링이다.그것은 이상적이지만,그것은 대부분 호환되는 옵션을 발견했다.

편집: *현재 독자들을 참고 원래 포스팅한 날짜.IE7 될 가능성이 더 이상 우려.

다른 팁

나는 같은 문제를 가지고 있었습니다,하지만 인터넷 익스플로러(I 테스트 버전 7)Firefox3Browser3.를 사용하는 :기 선택기를 나를 위해 작동:

ul.tabs li {
  list-style: none;
  float: left;
}
ul.tabs li:before {
  content: '\ffed';
  margin-right: 0.5em;
}

내가 사용하고 총알 광장 여기에,하지만 정상적인 탄\2022 것은 동일하게 작동합니다.

사용할 수도 있습에서 배경 이미지 <li> 요소로,여백을 유지하는 텍스트가 중복되지 않습니다.

li {
  background-image: url(i/bullet.gif) no-repeat center left;
  padding-left: 20px;
  display: inline;
}

브라우저에서 표시하기 때문에 총알 속 스타일"표시"가 처음에 설정"항목에".변화하는 디스플레이 속성을"inline"을 취소하는 모든 특별한 스타일에는 목록은 아이템을 얻을 수 있습니다.할 수 있어야를 시뮬레이션과 함께 그것의:전기 콘텐츠를 제공하지만,IE(적어도 통 버전 7)를 지원하지 않습니다.시뮬레이션 그것은 배경 이미지는 아마도 최고의 크로스 브라우저를 가지 방법이 될 수 있습니다.

실제로 아주 간단한 해결.에 다음을 추가 ul:

display:list-item;

추가 이 CSS 라인에 추가할 것입니다 bullet points.

계속 그들을 전시 차단되어,그들에게 폭 떠다.

그들을 앉으면,이는 같은 인라인 및 유지해야 합 목록의 스타일입니다.

당신이 시도했다 float: left 에 <li/>?무언가 이것을 좋아한다:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style type="text/css">
        ul li {
            float: left;
            margin-left: 2em;
        }
    </style>
</head>
<body>
    <ul>
        <li>test</li>
        <li>test2</li>
    </ul>
</body>
</html>

I 테스트 Firefox3.0.1,작동합니다.이 margin 로 설정하기 때문에 다른 사람의 총알이 겹치는 이전 항목입니다.

또한:조심해야 하는 경우 플로트 항목을 제거들에서 정상적인 흐름에 발생 <ul/> 을 더 높이입니다.를 추가하려는 경우에는 국경이나 뭔가를,당신은 이상한 결과를 얻을.

나 수정하는 방법은 다음을 추가하면 스타일

ul {
    overflow: auto;
    background: #f0f;
}

나는 그냥 듣고 내가 달렸으로 동일한 문제와 동일한 브라우저는 제약 조건때 나는 검색에 대한 답변 귀하의 게시물에왔지 않고 대답합니다.이것은 아마도 너무 늦게 도움 당신은,그러나 내가 생각한 후세를 위해서 내가해야 합니다.

모든 나는 나의 문제를 해결되었을 포함하는 또 다른 목록을 하나의 항목에서 서 목록 항목의 첫 번째 목록;이렇게...

HTML:

<div class="block-list">
  <ul>
    <li><ul><li>a</li></ul></li>
    <li><ul><li>b</li></ul></li>
    <li><ul><li>c</li></ul></li>
  </ul>
</div>

CSS:

.block-list > ul > li { display: inline; float: left; }

IE7 페이지:

    o a o b o c

...벙어리 솔루션이지만,그것은 작동하는 것 같다.

당신이 사용할 수 있는 문자체 참조를 참조하십시오: http://dev.w3.org/html5/html-author/charref

<ul class="inline-list>
  <li> &bullet; Your list item </li>
</ul>

HTML,나는 추가로 지친 몸과 마음에 휴식을 각 리 this:

<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>

CSS:

li { float:left; }

사용할 수 있습니다 다음 코드

li {
    background-image: url(img.gif) no-repeat center left;
    padding-left: 20px;
    display: inline;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top