HTML의 위치 지정 텍스트

웹 페이지의 메뉴 막대에 (홈 (간격) 그림 정보) 같은 텍스트를 넣으려는 경우 이 작업 방법을 알려주십시오. 내가 (사진 소개 홈)과 같은 얻고있다HTML의 위치 지정 텍스트

<div id="menuOption" > 
<a href="www.google.com"><font color="#FFFFFF" >Home</font></a> 
<a href="./download.html"><font color="#FFFFFF" >About</font></a> 
<a href="./purchase.html"><font color="#FFFFFF" >Picture</font></a> 
</div> 
    </div>

출처

2013-03-10 Hamraz

이

<ul> 
    <li><a href="">Home</a></li> 
    <li><a href="">News</a></li> 
    <li><a href="">Contact</a></li> 
    <li><a href="">About</a></li> 
    </ul>

출처

2013-03-10 10:23:10 PSR

그냥  

<div id="menuOption" > 
    <a href="www.google.com"><font color="#FFFFFF" >Home</font></a>&nbsp; 
    <a href="./download.html"><font color="#FFFFFF" >About</font></a>&nbsp; 
    <a href="./purchase.html"><font color="#FFFFFF" >Picture</font></a>&nbsp 
</div>

또는보다 효율적으로 사용 <ul>를 추가하려고 <li>display: inline-block;을하고 padding

를 사용

<ul> 
    <li>Home</li> 
    <li>About</li> 
    <li>Pictures</li> 
</ul>

CSS

ul li { 
    display: inline-block; 
    padding: 5px 8px; 
    /* Change this according to your requirement, 
    5px is top, bottom and 8px is left, right */ 
}

참고 : <font> 태그가되지 않습니다, CSS를 사용 color 특성 대신

출처

2013-03-10 10:23:17

가 왜 CSS를 사용하여 작업? –

@ 페카 웃다 나는 내 대답을 편집하고 있었다. :) 그러나 이것은 정말로 작은 요구 사항 이었기 때문에 그를 혼란시키고 싶지 않았다. –

@Pekka 웃음 LOL 완전히 나를 알리는 것에 대해 ''태그를 놓쳤다. –

사용 DIV 및 설정 플로트 : 왼쪽 패딩을 적용합니다.

<div id="menuOption" > 
    <div style="float:left; padding-left:5px"><a href="www.google.com"><font color="#0000" >Home</font></a></div> 
<div style="float:left; padding-left:5px"><a href="./download.html"><font color="#0000" >About</font></a></div> 
<div style="float:left; padding-left:5px"> <a href="./purchase.html"><font color="#0000" >Picture</font></a></div> 
</div>

출처

2013-03-10 10:26:55

HTML

<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Picture</a></li> 
</ul>

CSS

ul { 
    float:left; 
} 
ul li{ 
    float:left; 
    list-style-type:none; 
    padding:0 5px; 
} 
ul li a { 
    text-decoration:none; 
}

demo

출처

2013-03-10 10:41:45 jhunlio

HTML의 위치 지정 텍스트

답변

관련 문제