ul 다른 배경 크기의 목록 항목

Question

내 웹 사이트의 바닥 글을 만들려고합니다. 그것은 5 줄의 연락 정보, 검정 바탕에 흰색 텍스트, 사이에 공백이 있어야합니다. 그래서 본질적으로 그것 위에 하얀 텍스트와 함께 서로의 위에 5 개의 검은 길쭉한 조각처럼 보일 것이다.

문제는 모든 검은 색 띠가 대략 길이가되도록하려는 경우입니다. 난 <ul> 대신 목록 항목을 부동 시도하고 각 후 줄 바꿈을 넣어. 배경이 이제는 적당한 크기 였지만 나는 엉망이없이 그 사이에 공백을 추가 할 수 없었습니다.

HTML :

<ul> 
       <li>Company name</li> 
       <li>Adressadress 123444</li> 
       <li>023311 postal code</li> 
       <li>+358 12385495955</li> 
       <li>info@company.com</li> 
</ul> 

CSS :

ul {float:left; 
li { 
    list-style:none; 
    background-color:black; 
    color:white; 
    text-transform:uppercase; 
    font-weight:bold; 
    margin-bottom:5px; 
    padding-left:5px; 
    padding-right:5px; 
    } 
    } 

어떤 아이디어가?

Answer 1

텍스트 주위에 스팬 태그를 추가하면 문제가 해결됩니다.

<ul> 
    <li><span>one</span></li> 
    <li><span>two</span></li> 
    <li><span>three</span></li> 
    <li><span>four</span></li> 
    <li><span>five</span></li> 
</ul>​ 


ul { 
    margin:10px; 
} 

ul li { 
    margin-bottom:15px; 
} 

ul li span { 
    background:black; 
    padding:5px; 
    color:white; 
} 
​ 

http://jsfiddle.net/uwPcv/