이미지와 텍스트를 수평으로 정렬하는 방법 (홈 페이지 메뉴)

Question

여기 내 코드입니다. 내가 원하는 것은 CSS 만 사용하여 수평으로 정렬하는 것입니다.

<div id="menu"> 


    <img class="logo" src="http://lorempixel.com/148/56/"> 
    <span class="fleft"> 
    <ul class="tab"> 
    <li> <a href>home </a> </li> 
    <li> <a href> about us </a> </li> 
    <li> <a href>products </a> </li> 
    <li> <a href> services </a> </li> 
    <li> <a href> blog </a> </li> 
    <li> <a href>contact us </a> </li> 
    </span> 
    </div> 

여기에 CSS를

및 데모

http://jsfiddle.net/5h9qmzou/

에게 있습니다

Answer 1

대신 li에 대한 display:inline, display: block를 사용하거나 완전히 스타일을 제거 당신에게 감사 도와주세요.

Fiddle

Answer 2

은 지금 당신이 사이에 공간을 제공하기 위해 제공해야 horizontal 만 margin입니다. vertical을 1보다 아래로 만들려면 display:inline 대신 display:block을 추가해야합니다.

li 
{ 
display: block; 
} 

귀하에게 적합합니다.