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

试图将搜索栏移到右边但保持边框

2 个答案: