CSS：輸入字段和導航菜單樣式

我正在爲一個站點設置導航菜單，但我在實現目標時遇到困難。導航欄的輸入字段位於左上角。輸入字段的位置沒有按照我應用的CSS規則正確設置。我不確定它是位置還是html結構。有沒有我可以排列在導航菜單上方的輸入字段，如下圖所示？ EXAMPLE CSS：輸入字段和導航菜單樣式

感謝

HTML設立

<div id="header"> 
    <div id="searchInput"></div> 
     <h2>MAINT TITLE PAGE</h2> 
    <div id="navigation"> 

    <ul class="button-list"> 
    <li><a href="#" class="buttonNav" >Content 1</a></li> 
    <li><a href="#" class="buttonNav" >Content 2</a></li> 
    <li><a href="#" class="buttonNav" >Content 3</a></li> 
    <li><a href="#" class="buttonNav" >Content 4</a></li> 
    <li><a href="#" class="buttonNav" >Content 5</a></li> 
    </ul> 

    <li class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></li> 
    </div> 


</div>

CSS

<style> 

#navigation { 
    left: 440px; 
    margin-top: 80px; 
    position: relative; 
} 

#au_title { 
    color: #FC821D; 
    font-size: 120%; 
    font-weight: bold; 
    left: 515px; 
    letter-spacing: 2px; 
    position: relative; 
    text-transform: uppercase; 
    top: -105px; 
} 

#searchInput { 
    left: 700px; 
    position: relative; 
    top: -180px; 
} 

#contentNav { color: #cfdae3; } 


/* Dark Button CSS */ 
.buttonNav { 
    outline: 0; 
    padding: 5px 12px; 
    display: block; 
    color: #EBEBEB; 
    font-weight: bold; 
    text-shadow: 1px 1px #1f272b; 
    border: 1px solid #1c252b; 
    border-radius: 3px; 

} 
.buttonNav:hover { 
    color: #fff; 
    background: #4C5A64; 

} 
.buttonNav:active { 
    background-position: 0 top; 
    position: relative; 
    top: 1px; 
    color: #fff; 
    padding: 6px 12px 4px; 
    background: #20282D; 

} 


.button-list { 
    list-style: none outside none; 
    overflow: hidden; 
} 

.button-list li { float: left; margin: 0 5px 0 0; } 
.button-list li.search { padding-left: 18px; margin-left: 10px; position: relative; list-style: none outside none;} 

/* Search CSS: * 


    .search-input { 
     padding: 0 5px 0 22px; 
     border: 2px solid #DADADA; 
     height: 30px; 
     font-size: 12px; 
     line-height: 30px; 
     border-radius: 25px; 
     background: #FFF; 

    } 

    .search-input li { 
    list-style: none outside none; 
    } 


    .search-submit { 
     width: 13px; 
     height: 13px; 
     border: none; 
     background: url(images/mag-glass.png) no-repeat; 
     display: block; 
     position: absolute; 
     left: 26px; 
     top: 10px; 
     text-indent: -9999em; 
    } 
    </style>

當前結果：

enter image description here

慾望結果：* enter image description here

來源

2012-08-09 CodingWonders90

「搜索」元素被包裝在一個<li>不正確，將其更改爲<div>並添加你的導航上面，你的導航<div>您<h2>裏面像所以：

<div id="header"> 
     <div class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></div> 
     <div id="navigation"> 
     <h2>MAINT TITLE PAGE</h2> 
     <ul class="button-list"> 
     <li><a href="#" class="buttonNav" >Content 1</a></li> 
     <li><a href="#" class="buttonNav" >Content 2</a></li> 
     <li><a href="#" class="buttonNav" >Content 3</a></li> 
     <li><a href="#" class="buttonNav" >Content 4</a></li> 
     <li><a href="#" class="buttonNav" >Content 5</a></li> 
     </ul> 
     </div> 
    </div>

再加入這個CSS

.search{ 
    float:right; 
    margin-right:10px; 
}

希望有道理嗎？

來源

2012-08-09 07:43:08

+1。謝謝！你的答案符合最好的。 – CodingWonders90 2012-08-09 08:23:36

關注此鏈接jsfiddle，我希望它會幫助你

#header{ 
width: 100%; 
} 


#navigation { 
    float:right; 
    margin-top: 80px; 
} 

#au_title { 
    color: #FC821D; 
    font-size: 120%; 
    font-weight: bold; 
    left: 515px; 
    letter-spacing: 2px; 
    position: relative; 
    text-transform: uppercase; 
    top: -105px; 
} 

.search{ 
float:right; 
} 
.clearFloat{ 
    clear:both; 
} 


#contentNav { color: #cfdae3; } 


/* Dark Button CSS */ 
.buttonNav { 
    outline: 0; 
    padding: 5px 12px; 
    display: block; 
    color: #EBEBEB; 
    font-weight: bold; 
    text-shadow: 1px 1px #1f272b; 
    border: 1px solid #1c252b; 
    border-radius: 3px; 

} 
.buttonNav:hover { 
    color: #fff; 
    background: #4C5A64; 

} 
.buttonNav:active { 
    background-position: 0 top; 
    position: relative; 
    top: 1px; 
    color: #fff; 
    padding: 6px 12px 4px; 
    background: #20282D; 

} 


.button-list { 
    list-style: none outside none; 
    overflow: hidden; 
} 

.button-list li { float: left; margin: 0 5px 0 0; } 
.button-list li.search { padding-left: 18px; margin-left: 10px; position: relative; list-style: none outside none;} 

/* Search CSS: */ 


    .search-input { 
     padding: 0 5px 0 22px; 
     border: 2px solid #DADADA; 
     height: 30px; 
     font-size: 12px; 
     line-height: 30px; 
     border-radius: 25px; 
     background: #FFF; 

    } 

    .search-input li { 
    list-style: none outside none; 
    } 


    .search-submit { 
     width: 13px; 
     height: 13px; 
     border: none; 
     background: url(images/mag-glass.png) no-repeat; 
     display: block; 
     position: absolute; 
     left: 26px; 
     top: 10px; 
     text-indent: -9999em; 
    }

來源

2012-08-09 07:48:41 mattematico

您的HTML代碼中錯誤的標記。進行搜索LIDIV並將其作爲第一個孩子放在header div中，然後完成！

Working Demo

來源

2012-08-09 07:52:42 Dipak

這不是我的朋友。但我目前正在檢查每個答案。謝謝你的回答。 – CodingWonders90 2012-08-09 07:57:07

我不明白爲什麼一些人會因此而灰心喪氣。相反，他們應該給出正確的答案:) – Dipak 2012-08-09 07:59:43

CSS樣式

#search { 
margin-top: -40px; 
text-align:right; 
width: 480px; 
list-style: none; 
} 

.search { text-align:right; }

更換

<div id="navigation"> 
<ul id="search"><li class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></li></ul> 
    <ul class="button-list"> 
    <li><a href="#" class="buttonNav" >Content 1</a></li> 
    <li><a href="#" class="buttonNav" >Content 2</a></li> 
    <li><a href="#" class="buttonNav" >Content 3</a></li> 
    <li><a href="#" class="buttonNav" >Content 4</a></li> 
    <li><a href="#" class="buttonNav" >Content 5</a></li> 
    </ul> 
</div>

希望DIV導航，這是有益的

來源

2012-08-09 07:55:13 Saleem

我希望你正在尋找這樣的： - http://tinkerbin.com/BTryMLES

HTML

<div id="header"> 
    <div id="searchInput"></div> 

    <div id="navigation"> 
    <div class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></div> 
    <ul class="button-list"> 
      <h2>MAINT TITLE PAGE</h2> 
    <li><a href="#" class="buttonNav" >Content 1</a></li> 
    <li><a href="#" class="buttonNav" >Content 2</a></li> 
    <li><a href="#" class="buttonNav" >Content 3</a></li> 
    <li><a href="#" class="buttonNav" >Content 4</a></li> 
    <li><a href="#" class="buttonNav" >Content 5</a></li> 
    </ul> 


    </div> 


</div>

CSS

body { 
    background:#e6e6e6; 
} 

#navigation { 
    left: 440px; 
    margin-top: 80px; 
    position: relative; 

} 

#au_title { 
    color: #FC821D; 
    font-size: 120%; 
    font-weight: bold; 
    left: 515px; 
    letter-spacing: 2px; 
    position: relative; 
    text-transform: uppercase; 
    top: -105px; 
} 

#searchInput { 
    left: 700px; 
    position: relative; 
    top: -180px; 
} 

#contentNav { color: #cfdae3; } 



.buttonNav { 
    outline: 0; 
    padding: 5px 12px; 
    display: block; 
    color: #EBEBEB; 
    font-weight: bold; 
    text-shadow: 1px 1px #1f272b; 
    border: 1px solid #1c252b; 
    border-radius: 3px; 

} 
.buttonNav:hover { 
    color: #fff; 
    background: #4C5A64; 

} 
.buttonNav:active { 
    background-position: 0 top; 
    position: relative; 
    top: 1px; 
    color: #fff; 
    padding: 6px 12px 4px; 
    background: #20282D; 

} 


.button-list { 
    list-style: none outside none; 

    clear:both; 
} 

.button-list li { float: left; margin: 0 5px 0 0; } 
.button-list li.search { padding-left: 18px; margin-left: 10px; position: relative; list-style: none outside none;} 




    .search-input { 
     padding: 0 5px 0 22px; 
     border: 2px solid #DADADA; 
     height: 30px; 
     font-size: 12px; 
     line-height: 30px; 
     border-radius: 25px; 
     background: #FFF; 
    width:200px; 
     float:right; 
     margin-right:175px; 
    } 

    .search-input li { 
    list-style: none outside none; 
    } 


    .search-submit { 
     width: 13px; 
     height: 13px; 
     border: none; 
     background: url(images/mag-glass.png) no-repeat; 
     display: block; 
     position: absolute; 
     left: 26px; 
     top: 10px; 
     text-indent: -9999em; 
    }

來源

2012-08-09 08:23:56

CSS：輸入字段和導航菜單樣式

回答

相關問題