정렬되지 않은 수평 목록

Question

나는 정렬되지 않은 목록으로 고생하고 있습니다. 수평으로 만들 수있는 방법이 있습니까? jsFiddle을 참조하십시오. 빨간색 상자는 각 텍스트 앞에 있고 그에 따라 간격을두고 있습니다. 내가 무엇을 놓치고 있는지 나는 확신한다.

http://jsfiddle.net/5Lmymdwh/

#alertLegend li { 
    display: inline; 
    font-size:10px; 
    height:15px; 
    left:10px; 
    list-style-type:none; 
    margin:.5em .5em 0em -3.4em; 
    position:relative; 
    text-align:left; 
} 

.legendDiv { 
    background-color:#8B0000; 
    border:solid 1px #333; 
    float:left; 
    margin-right:2px; 
    width:15px; 
} 

.legendTxt { 
    font-size:12px; 
    color:#555; 
    padding-left:25px; 
} 



<ul id='alertLegend'> 
    <li><div class='legendDiv'>&nbsp;</div><span class='legendTxt'> Demo 1</span></li> 
    <li><div class='legendDiv'>&nbsp;</div><span class='legendTxt'> Demo 2</span></li> 
    <li><div class='legendDiv'>&nbsp;</div><span class='legendTxt'> Demo 3</span></li> 
</ul> 

고마워요

Answer 1

나는 당신의 JSFiddler HERE

업데이트 당신은 기본적으로 실수의 조합을 가지고 있었다. 이 코드는 처음 시작했을 때보다 간단합니다. 가장 큰 문제는 빨간 상자에 float:left을주는 것이 었습니다.이 자동 조작은 요소를 절대 왼쪽으로 밀었습니다. 다른 문제는 div를 내부에 생성하는 것이 었습니다. 목록 항목에는 span 태그가 필요하지 않습니다. 이미 <li> 태그로 싸여 있습니다. 그러나 사각형에는 span 태그가 필요하므로 수직으로 정렬하고 <li> 콘텐츠의 나머지 부분에 영향을 미치지 않고 다르게 스타일을 지정하십시오.

Answer 2

여기에 노력하고 CSS : 의사 요소 :

#alertLegend li { 
    display: inline-block; 
    list-style-type:none; 
    height:15px; 
} 

.legendDiv { 
    background-color:#8B0000; 
    border:solid 1px #333; 
    float:left; 
    margin-right:2px; 
    width:15px; 
    height: 15px; 
} 

.legendTxt { 
    font-size:12px; 
    color:#555; 
} 

Answer 3

대신 사용하면 :before 사용할 수있는 사용자 정의 총알 div 추가.

#alertLegend li { 
 
    display: inline-block; 
 
    font-size: 10px; 
 
    height: 15px; 
 
    font-size: 12px; 
 
    color: #555; 
 
    list-style-type: none; 
 
} 
 
#alertLegend li:not(:last-child) { 
 
    margin-right: 10px; 
 
} 
 
#alertLegend li:before { 
 
    content: ''; 
 
    border: solid 1px #333; 
 
    background-color: #8B0000; 
 
    float: left; 
 
    height: 12px; 
 
    width: 15px; 
 
}

<ul id='alertLegend'> 
 
    <li>Demo 1</li> 
 
    <li>Demo 2</li> 
 
    <li>Demo 3</li> 
 
</ul>

Answer 4

정확히 무엇을 달성하려고하는지 모르지만 border-left 또는 background을 사용하여 HTML/CSS를 훨씬 더 단순화 할 수 있습니다.

는 여기를 참조하십시오 : 나는 JS 바이올린 보았을 때 http://jsfiddle.net/pavkr/yrxbLvkf/2/

Answer 5

, 나는 텍스트가 전혀 사업부 년대 아니었다 것으로 나타났습니다. 나는 그 이후로 그들을 옮기고 div의 내부에서 더 쉽게 읽을 수 있도록 텍스트 색상을 변경했습니다. 또한 div 안에 텍스트 서식을 지정하려는 경우 스팬 클래스 대신 편집 할 수 있습니다 (삭제되었지만 단순함을 나타 내기 위해 제거되었습니다).

HTML

<ul id='alertLegend'> 
    <li> 
     <div class='legendDiv'>Demo1</div> 
    </li> 
    <li> 
     <div class='legendDiv'>Demo2</div> 
    </li> 
    <li> 
     <div class='legendDiv'>Demo3</div> 
    </li> 
</ul> 

CSS

#alertLegend li { 
    display: inline; 
    font-size:10px; 
    height:15px; 
    left:10px; 
    list-style-type:none; 
    margin:.5em .5em 0em -3.4em; 
    position:relative; 
    text-align:left; 
} 
.legendDiv { 
    background-color:#8B0000; 
    border:solid 1px #333; 
    float:left; 
    margin-right:2px; 
    width:30px; 
    color: white; 
}