html - 试图将搜索栏向右移动但保持在边界内

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>