如何在HTML中将搜索图标移动到搜索栏的右侧？

Question

这是我正在制作的网站的所有代码，我在导航部分有一个搜索栏。我想要包括一个图标来自字体Awesome，我已经添加了这个在那里，但我似乎不能把它放在正确的地方，这是旁边的搜索栏在右边。有什么办法能解决这个问题吗？如能提供一些帮助，将不胜感激:)

以下是网站的Javascript、CSS和HTML代码。

​

function AboutHover() {
  document.getElementById('about-button').firstElementChild.style.fontWeight = "bold";
}

function AboutNormal() {
  document.getElementById('about-button').firstElementChild.style.fontWeight = "normal";
}

function GalleryHover() {
  document.getElementById('gallery-button').firstElementChild.style.fontWeight = "bold";
}

function GalleryNormal() {
  document.getElementById('gallery-button').firstElementChild.style.fontWeight = "normal";
}

function ContactHover() {
  document.getElementById('contact-button').firstElementChild.style.fontWeight = "bold";
}

function ContactNormal() {
  document.getElementById('contact-button').firstElementChild.style.fontWeight = "normal";
}

body, html{
   height: 100%;
   margin: 0;
   padding: 0;
   font-family: 'Work Sans', sans-serif;
   font-weight: 400;
}

.container {
    width: 80%;
    margin: 0 1.5%;
}

header{
    background:rgb(241, 200, 203);
    position: relative;
    overflow: hidden;
}

header::after{
    content: "";
    display: table;
    clear:both;
}

.logo{
    width: 9%;
    height: 5.4%;
    float: left;
    padding: 0px;
}

nav{
    float: inline-end;
    overflow: auto;
}

nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li{
    display: inline-block;
    margin-left: 6.3%;
    padding-top: 1.8%;
    font-size: 112.5%;
    position: relative;
}

nav input[type=text]{
    float: right;
    margin-top: 2%;
    background-color: transparent;
    color: rgb(95, 62, 64);
    font-size: 112.5%;
    border: none;
    border-bottom: solid 2px black;
    margin-right: 10%;
}

nav input::placeholder{
    color: rgb(95, 62, 64);
    font-family: 'Work Sans', sans-serif;
}

nav i{
    float: right;      
}

nav a{
    color: black;
    text-decoration: none;
    text-transform: uppercase;

}

nav a:hover{
    color: rgb(0, 0, 0);
}

nav a::before{
    content: "";
    display: block;
    height: 10%;
    background-color: rgb(0, 0, 0);
    
    position: absolute;
    top: 0;
    width: 0%;
    transition: all ease-in-out 250ms;
}

nav a:hover::before{
    width: 100%;
}

.bg-one{
    background-image: url("bg-one.jpg");
    height: 100%;
    padding-top: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position:relative;     
}


.transbox{
    padding: 0.8%;
    width: 30%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 10px double rgb(240, 178, 182);
    margin-left: 2.5%;
    margin-right: auto;
    margin-bottom: auto;
    display: block;
    position: absolute;
    margin-top: 2.5%;
}

h1{
    text-align: center;
    font-size: 406.25%;
    color:rgb(0, 0, 0, .7); 
}

.first-block{
    height: 12%;
    background-color:rgb(241, 200, 203);
    text-align: center;
    border: 10px double white;
    padding-top: 1.6%;
    padding-bottom: 3.8%;
    vertical-align: auto;
}

h3{
    text-transform: uppercase;
    font-size: 250%;
    text-align: center;
    color: rgb(199, 127, 131);
    font-weight: 500;
}

.bg-two{
    background-image: url("bg-two.jpg");    
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative;
}

.about-box{
    width: 32%;
    height: 40%;
    background-color: rgba(241, 200, 203, 0.7);
    position: absolute;
    margin-top: 15%;
    margin-left: 3.8%;
    margin-right: auto;
    margin-bottom: auto;
    display: block;
    border-radius: 10px;
    padding: 1.35%;
}

h4{
    font-size: 312%;
    text-align: center;
    font-weight: 300;
    margin-top: 7%;
    margin-bottom: 10%;
    color:rgb(126, 81, 83);
}

.about-box p, .gallery-box p, .contact-box p{
    font-size: 125%;
    text-align: center;
    color:rgb(95, 62, 64);
}

.about-box-two{
    width: 92%;
    height: 45%;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-left: 0%;
    display: block;
    border-radius: 10px;
}

.about-button{
    width: 25%;
    height: auto;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-top: 21%;
    margin-left: 102%;
    display: block;
    padding: 20px;
    border: 2px solid rgb(126, 81, 83);
    border-radius: 10px;
}

.about-button a, .gallery-button a, .contact-button a{
    font-size: 156.25%;
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(126, 81, 83);
}

.far{
    padding-left: 20px;
    padding-bottom: 2px;
}

.bg-three{
    background-image: url("bg-three.jpg");    
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative;
}

.gallery-box{
    width: 30%;
    height: 40%;
    background-color: rgba(241, 200, 203, .7);
    position: absolute;
    margin-top: 15%;
    margin-left: 65%;
    margin-bottom: auto;
    display: block;
    border-radius: 10px;
    
}

.gallery-box-two{
    width: 91%;
    height: 45%;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-left: 3.5%;
    display: block;
    border-radius: 10px;
    padding: 1%;
}

.gallery-button{
    width: auto;
    height: auto;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-top: 30.55%;
    margin-left: 50%;
    display: block;
    padding: 1.2%;
    border: 2px solid rgb(126, 81, 83);
    border-radius: 10px;
}

.bg-four{
    background-image: url("bg-four.jpg");    
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative;
}

.contact-box{
    width: 36%;
    height: 35%;
    background-color: rgba(241, 200, 203, 0.7);
    position: absolute;
    margin-top: 16%;
    margin-left: 3%;
    margin-right: auto;
    margin-bottom: auto;
    display: block;
    border-radius: 10px;
}

.contact-box-two{
    width: 93%;
    height: auto;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-left: 3.4%;
    margin-bottom: 15%;
    display: block;
    border-radius: 10px;
}

.contact-button{
    width: auto;
    height: auto;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-top: 28.8%;
    margin-left: 630px;
    display: block;
    padding: 20px;
    border: 2px solid rgb(126, 81, 83);
    border-radius: 10px;
}

.footer{ 
    height: 20%;
    text-align: center;
    background-color: rgb(241, 200, 203);
    position: relative;
}

@media screen and (max-width: 768px) {
    h1{
        font-size: 312%;
    }

    a{
        font-size: 80%;
    }
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1" name="viewport"/>
        <title>New York - The City That Never Sleeps</title>
        <link rel="stylesheet" href="main.css">
        <script src="app.js"></script>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400&display=swap" rel="stylesheet">
        <script src="https://kit.fontawesome.com/f107c76e74.js" crossorigin="anonymous"></script>
    <body>
        <header>
            <div class="container">
            <img src="nyc-logo.png" alt="logo" class="logo">

            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Contacts</a></li>
                    <input type="text" placeholder="Search" >
                </ul>
                <i class="fas fa-search"></i>
            </nav>
            </div>
        </header>
        <div class="bg-one">
            <div class="transbox">
                <h1>NEW YORK</h1>
            </div>
        </div>
        <div class="first-block">
            <h3>Welcome to the city that never sleeps...</h3>
        </div>
        <div class="bg-two">
            <div class="about-box">
                <h4>ABOUT</h4>
                <div class="about-box-two">
                    <p> Well-known for its attractive landscapes and environment, New York attracts more than 67 million visitors every year.
                        <br>Click on the button to explore New York's finest attractions and landmarks in the 'About' page!</br>
                    </p>
                </div>
                <div class="about-button" id="about-button" onmouseover="AboutHover()" onmouseout="AboutNormal()">
                    <a href="#">ABOUT<i class="far fa-arrow-alt-circle-right"></i></a>
                </div>
            </div>
        </div>
        <div style="width:auto; height: 20px; background-color: rgb(241, 200, 203, .7);"></div>
        <div class ="bg-three">
            <div class="gallery-box">
                <h4>GALLERY</h4>
                <div class= "gallery-box-two">
                    <p>Take a peek into some first-hand images taken by tourists in New York. 
                        <br>Click on the button to discover New York's beautiful features...</br></p>
                </div>
            </div>
            <div class= "gallery-button" id="gallery-button" onmouseover="GalleryHover()" onmouseout="GalleryNormal()">
                <a href="#">GALLERY<i class="far fa-arrow-alt-circle-right"></i></a>
            </div>
        </div>
        <div style="width: auto; height: 20px; background-color: rgba(241, 200, 203, .7);"></div>
        <div class="bg-four">
            <div class = "contact-box">
                <h4>CONTACT</h4>
                <div class = "contact-box-two">
                    <p>To find out the places where you can experience the best of New York, click on the button!</p>
                </div>
            </div>
            <div class = "contact-button" id="contact-button" onmouseover="ContactHover()" onmouseout="ContactNormal()">
                <a href = "#">CONTACT<i class="far fa-arrow-alt-circle-right"></i></a>
            </div>
        </div>
        <div class="footer">
            <p> </p>
        </div>
    </body>
</html>

​

标题当前的样子

Answer 1

有几种方法可以做到这一点，但从您已经拥有的代码出发，我将建议进行一些调整，使之成为可能：

• 将输入从导航中的<ul>中取出。因为它不在<li>标记中，所以这样做实际上是无效的。
• 将一个<div>放在<ul>之后，并将<input>和图标放入其中
• 调整css，使float: right;位于<div>上，而不是在input和i元素上。还可以将任何与间距相关的样式移动到div上。

在下面的示例中，我为新的div提供了一个.search类，并将一些样式从您的input移到它上。我还从图标样式中删除了浮点数。

​

function AboutHover() {
  document.getElementById('about-button').firstElementChild.style.fontWeight = "bold";
}

function AboutNormal() {
  document.getElementById('about-button').firstElementChild.style.fontWeight = "normal";
}

function GalleryHover() {
  document.getElementById('gallery-button').firstElementChild.style.fontWeight = "bold";
}

function GalleryNormal() {
  document.getElementById('gallery-button').firstElementChild.style.fontWeight = "normal";
}

function ContactHover() {
  document.getElementById('contact-button').firstElementChild.style.fontWeight = "bold";
}

function ContactNormal() {
  document.getElementById('contact-button').firstElementChild.style.fontWeight = "normal";
}

body, html{
   height: 100%;
   margin: 0;
   padding: 0;
   font-family: 'Work Sans', sans-serif;
   font-weight: 400;
}

.container {
    width: 80%;
    margin: 0 1.5%;
}

header{
    background:rgb(241, 200, 203);
    position: relative;
    overflow: hidden;
}

header::after{
    content: "";
    display: table;
    clear:both;
}

.logo{
    width: 9%;
    height: 5.4%;
    float: left;
    padding: 0px;
}

nav{
    float: inline-end;
    overflow: auto;
}

nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li{
    display: inline-block;
    margin-left: 6.3%;
    padding-top: 1.8%;
    font-size: 112.5%;
    position: relative;
}
nav .search{
    float: right;
    margin-top: 2%;
    margin-right: 10%;
}
nav input[type=text]{
    background-color: transparent;
    color: rgb(95, 62, 64);
    font-size: 112.5%;
    border: none;
    border-bottom: solid 2px black;    
}

nav input::placeholder{
    color: rgb(95, 62, 64);
    font-family: 'Work Sans', sans-serif;
}


nav a{
    color: black;
    text-decoration: none;
    text-transform: uppercase;

}

nav a:hover{
    color: rgb(0, 0, 0);
}

nav a::before{
    content: "";
    display: block;
    height: 10%;
    background-color: rgb(0, 0, 0);
    
    position: absolute;
    top: 0;
    width: 0%;
    transition: all ease-in-out 250ms;
}

nav a:hover::before{
    width: 100%;
}

.bg-one{
    background-image: url("bg-one.jpg");
    height: 100%;
    padding-top: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position:relative;     
}


.transbox{
    padding: 0.8%;
    width: 30%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 10px double rgb(240, 178, 182);
    margin-left: 2.5%;
    margin-right: auto;
    margin-bottom: auto;
    display: block;
    position: absolute;
    margin-top: 2.5%;
}

h1{
    text-align: center;
    font-size: 406.25%;
    color:rgb(0, 0, 0, .7); 
}

.first-block{
    height: 12%;
    background-color:rgb(241, 200, 203);
    text-align: center;
    border: 10px double white;
    padding-top: 1.6%;
    padding-bottom: 3.8%;
    vertical-align: auto;
}

h3{
    text-transform: uppercase;
    font-size: 250%;
    text-align: center;
    color: rgb(199, 127, 131);
    font-weight: 500;
}

.bg-two{
    background-image: url("bg-two.jpg");    
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative;
}

.about-box{
    width: 32%;
    height: 40%;
    background-color: rgba(241, 200, 203, 0.7);
    position: absolute;
    margin-top: 15%;
    margin-left: 3.8%;
    margin-right: auto;
    margin-bottom: auto;
    display: block;
    border-radius: 10px;
    padding: 1.35%;
}

h4{
    font-size: 312%;
    text-align: center;
    font-weight: 300;
    margin-top: 7%;
    margin-bottom: 10%;
    color:rgb(126, 81, 83);
}

.about-box p, .gallery-box p, .contact-box p{
    font-size: 125%;
    text-align: center;
    color:rgb(95, 62, 64);
}

.about-box-two{
    width: 92%;
    height: 45%;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-left: 0%;
    display: block;
    border-radius: 10px;
}

.about-button{
    width: 25%;
    height: auto;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-top: 21%;
    margin-left: 102%;
    display: block;
    padding: 20px;
    border: 2px solid rgb(126, 81, 83);
    border-radius: 10px;
}

.about-button a, .gallery-button a, .contact-button a{
    font-size: 156.25%;
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(126, 81, 83);
}

.far{
    padding-left: 20px;
    padding-bottom: 2px;
}

.bg-three{
    background-image: url("bg-three.jpg");    
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative;
}

.gallery-box{
    width: 30%;
    height: 40%;
    background-color: rgba(241, 200, 203, .7);
    position: absolute;
    margin-top: 15%;
    margin-left: 65%;
    margin-bottom: auto;
    display: block;
    border-radius: 10px;
    
}

.gallery-box-two{
    width: 91%;
    height: 45%;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-left: 3.5%;
    display: block;
    border-radius: 10px;
    padding: 1%;
}

.gallery-button{
    width: auto;
    height: auto;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-top: 30.55%;
    margin-left: 50%;
    display: block;
    padding: 1.2%;
    border: 2px solid rgb(126, 81, 83);
    border-radius: 10px;
}

.bg-four{
    background-image: url("bg-four.jpg");    
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative;
}

.contact-box{
    width: 36%;
    height: 35%;
    background-color: rgba(241, 200, 203, 0.7);
    position: absolute;
    margin-top: 16%;
    margin-left: 3%;
    margin-right: auto;
    margin-bottom: auto;
    display: block;
    border-radius: 10px;
}

.contact-box-two{
    width: 93%;
    height: auto;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-left: 3.4%;
    margin-bottom: 15%;
    display: block;
    border-radius: 10px;
}

.contact-button{
    width: auto;
    height: auto;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-top: 28.8%;
    margin-left: 630px;
    display: block;
    padding: 20px;
    border: 2px solid rgb(126, 81, 83);
    border-radius: 10px;
}

.footer{ 
    height: 20%;
    text-align: center;
    background-color: rgb(241, 200, 203);
    position: relative;
}

@media screen and (max-width: 768px) {
    h1{
        font-size: 312%;
    }

    a{
        font-size: 80%;
    }
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1" name="viewport"/>
        <title>New York - The City That Never Sleeps</title>
        <link rel="stylesheet" href="main.css">
        <script src="app.js"></script>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400&display=swap" rel="stylesheet">
        <script src="https://kit.fontawesome.com/f107c76e74.js" crossorigin="anonymous"></script>
    <body>
        <header>
            <div class="container">
            <img src="nyc-logo.png" alt="logo" class="logo">

              <nav>
                  <ul>
                      <li><a href="#">Home</a></li>
                      <li><a href="#">About</a></li>
                      <li><a href="#">Gallery</a></li>
                      <li><a href="#">Contacts</a></li>

                  </ul>
                  <div class="search">
                      <input type="text" placeholder="Search">
                      <i class="fas fa-search" aria-hidden="true"></i>
                  </div>
              </nav>

            </div>
        </header>
        <div class="bg-one">
            <div class="transbox">
                <h1>NEW YORK</h1>
            </div>
        </div>
        <div class="first-block">
            <h3>Welcome to the city that never sleeps...</h3>
        </div>
        <div class="bg-two">
            <div class="about-box">
                <h4>ABOUT</h4>
                <div class="about-box-two">
                    <p> Well-known for its attractive landscapes and environment, New York attracts more than 67 million visitors every year.
                        <br>Click on the button to explore New York's finest attractions and landmarks in the 'About' page!</br>
                    </p>
                </div>
                <div class="about-button" id="about-button" onmouseover="AboutHover()" onmouseout="AboutNormal()">
                    <a href="#">ABOUT<i class="far fa-arrow-alt-circle-right"></i></a>
                </div>
            </div>
        </div>
        <div style="width:auto; height: 20px; background-color: rgb(241, 200, 203, .7);"></div>
        <div class ="bg-three">
            <div class="gallery-box">
                <h4>GALLERY</h4>
                <div class= "gallery-box-two">
                    <p>Take a peek into some first-hand images taken by tourists in New York. 
                        <br>Click on the button to discover New York's beautiful features...</br></p>
                </div>
            </div>
            <div class= "gallery-button" id="gallery-button" onmouseover="GalleryHover()" onmouseout="GalleryNormal()">
                <a href="#">GALLERY<i class="far fa-arrow-alt-circle-right"></i></a>
            </div>
        </div>
        <div style="width: auto; height: 20px; background-color: rgba(241, 200, 203, .7);"></div>
        <div class="bg-four">
            <div class = "contact-box">
                <h4>CONTACT</h4>
                <div class = "contact-box-two">
                    <p>To find out the places where you can experience the best of New York, click on the button!</p>
                </div>
            </div>
            <div class = "contact-button" id="contact-button" onmouseover="ContactHover()" onmouseout="ContactNormal()">
                <a href = "#">CONTACT<i class="far fa-arrow-alt-circle-right"></i></a>
            </div>
        </div>
        <div class="footer">
            <p> </p>
        </div>
    </body>
</html>

​