내 검색 바

Question

어떻게 내 검색 바. 모든 화면에서 마우스 오른쪽 정렬 (운영 시스템)

그녀가 지금까지 때 내 코드 얻을. 모든 화면에서 마우스 오른쪽 정렬 (및 운영 체제) 얻는 방법 내 랩톱에서 우분투 (12.04.1)를 실행하는 중 내 website을 엽니 다.
내 작업 바탕 화면에서 내 웹 사이트를 열 때 내 검색 바가 완벽하게 정렬되었습니다. 7
내 검색 창이 완벽하게 정렬되지 않았습니다.

HTML 4.01

<ul id="nav"> 
<li><a href="index.html"><img src="images/home.gif" title="Home" alt="Home"><b><font color="red">Home</font></b></a></li> 
<li><a href="linux.html"><img src="images/linux_logo.gif" title="Linux" alt="Linux" height="18" width="18">Linux</a></li> 
<li><a href="learn.html"><img src="images/brain.gif" title="Brain" alt="Brain" height="18" width="18">Learn</a></li> 
<li><a href="../tutorials/top-games-for-ubuntu.html"><img src="images/game.png" width="18" height="18" title="Games" alt="Games">Games</a></li> 
<li><a href="about.html"><img src="images/corneillie-black-red.jpg" title="about" alt="about" height="18" width="18">About</a></li> 

<li id="eurobytes-search" title="Eurobytes search"> 
<form action="/sphider-1.3.5/search.php" method="get" class="search" style="width: 100%;height: 100%;"> 
<input name="query" id="query" size="20" onblur="if(this.value == '') { this.value = 'search' }" onfocus="if(this.value == 'search') { this.value = '' }" value="search" class="search" type="text"> 
<input name="search" value="1" type="hidden"> 
<a href="/sphider-1.3.5/search.php?adv=1" title="Advanced Search" style=" 
    background-color:#F5F5F5; 
    border-right: 0px; 
    display: inline; 
    font-weight: normal; 
    padding: 0px 0px; 
    text-decoration: none; 
    font-size: 16px; 
    vertical-align:baseline; 
    text-transform: uppercase;">Advanced Search</a> 
<input style="display:inline; width: 30%; height: 23px; border-color: #CCCCCC; 
    border-style: solid; 
    border-width: 1px; 
    font-size: 100%; 
    vertical-align:baseline; 
    color:#000000;" value="search" type="submit" > 
</form> 
</li> 
</ul> 

CSS3 (검색 창 및 내비게이션 바)

((메신저도 내 검색 창부터 탐색 표시 줄의 코드를 첨가 내비게이션 바 div) 내에는 W3C 표준 테스트를 통과)

#nav { 
    background-color: #F2F2F2; 
    border-bottom: 1px solid #CCCCCC; 
    border-top: 1px solid #CCCCCC; 
    float: left; 
    height: 100%; 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 

#nav li { 
    float: left; 
} 

#nav li a { 
    border-right: 1px solid #CCCCCC; 
    color: #006699; 
    display: block; 
    font-weight: bold; 
    padding: 14px 15px; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

#nav li a:hover { 
    background-color: #FFFFFF; 
    color: #CC0000; 
} 

#eurobytes-search { 
    color: #CDCDCD; 
    float: right; 
    height: 100%; 
    padding: 0; 
    text-align: right; 
    width: 244px; 
} 

#query { 
    border-color: #CCCCCC; 
    border-style: solid; 
    border-width: 1px; 
    font-size: 16px; 
    height: 23px; 
    width: 99%; 
} 

내 질문을 단순화하려면 내 input 명령을 모든 화면과 운영 체제에서 동일한 너비로 지정하는 방법은 무엇입니까?

Answer 1

픽셀 치수를 백분율이 아닌 입력 값으로 사용하고 float:right을 사용하십시오. 이 요소 뒤에 플로트를 지워야합니다.

또한 목록 기반 메뉴를 사용하는 방식으로 현대화해야합니다. 인라인 이미지가 아닌 A 태그에서 CSS 배경 이미지를 사용해야합니다. Font 태그는 명확한 아니오입니다. 외부 스타일 시트에서 모든 스타일에 CSS를 사용하십시오. 인라인 스타일은 나쁜 형식입니다. "는 A-태그가 아닌 인라인 이미지를 배경 이미지"I Love Lists