試圖移動搜索欄到右邊，但保持在邊框

Question

我想讓我的搜索欄漂浮在與我的導航欄邊界相同的線上。

<div class="main-nav"> 
<ul> 
    <a href="aboutmeindex.html"><li>Home</li></a> 
    <a href="about.html"><li>Projects</li></a> 
    <a href="projects.html"><li>Contact</li></a> 
</ul> 
<form class="searchsubmit"> 
    <input type="text" placeholder="Search Here" class="searchbox"> 
    <input type="submit" value="search" class="searchbutton"> 
</form> 

li { 
    list-style-type: none; 
    display: inline-block; 
    font-size: 20px; 
    letter-spacing: 4px; 
    width: 150px; 
} 

.main-nav a { 

} 

.main-nav { 
    border-bottom: 2px solid black; 
    border-top: 2px solid black; 
} 

a:link { 

} 

a:visited { 
    color: #008B00; 
} 

這裏是jsFiddle這一點。任何幫助將不勝感激。

Answer 1

檢查代碼片段。運行該代碼段有ü會看到結果

li { 
 
list-style-type: none; 
 
display: inline-block; 
 
font-size: 20px; 
 
letter-spacing: 4px; 
 
width: 150px; 
 
} 
 

 
.main-nav a { 
 
text-decoration: none; 
 
} 
 

 
.main-nav { 
 
border-bottom: 2px solid black; 
 
border-top: 2px solid black; 
 
height:80px; 
 
} 
 

 
a:link { 
 
color: #008B00; 
 
} 
 

 
a:visited { 
 
color: #008B00; 
 

 
} 
 
#demo{ 
 
float:right}

<div class="main-nav"> 
 
<ul> 
 
    <a href="aboutmeindex.html"><li>Home</li></a> 
 
    <a href="about.html"><li>Projects</li></a> 
 
    <a href="projects.html"><li>Contact</li></a> 
 
</ul> 
 
    
 
<form class="searchsubmit"> 
 
    <div id="demo"> 
 
    <input type="text" placeholder="Search Here" class="searchbox"> 
 
    <input type="submit" value="search" class="searchbutton"> 
 
    </div> 
 
    </form> 
 
    </div>

Answer 2

HTML

<div class="main-nav"> 
<ul> 
    <a href="aboutmeindex.html"><li>Home</li></a> 
    <a href="about.html"><li>Projects</li></a> 
    <a href="projects.html"><li>Contact</li></a> 
</ul> 
<form class="searchsubmit"> 
    <input type="text" placeholder="Search Here" class="searchbox"> 
    <input type="submit" value="search" class="searchbutton"> 
</form> 
</div> 

CSS

li { 
list-style-type: none; 
display: inline-block; 
font-size: 20px; 
letter-spacing: 4px; 
width: 150px; 
} 

.main-nav a { 
text-decoration: none; 
} 

.main-nav { 
border-bottom: 2px solid black; 
border-top: 2px solid black; 
    padding: 16px 0px; 
} 

a:link { 
color: #008B00; 
} 

a:visited { 
color: #008B00; 

} 

form.searchsubmit{ 
    display: inline-block; 
    float: right; 
} 

ul{ 
    display: inline-block; 
    margin: 0px; 

} 

VIEW EXAMPLE