搜索栏图标向下移动?

时间:2019-02-24 19:16:37

标签: html css

@font-face {
  font-family: Raleway;
  src: url(../font/Raleway-Regular.ttf);
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  color: black;
  font-family: 'Raleway';
  background-color: white;
  scroll-behavior: smooth;
}

/* Navigation */

.nav {
  color: white;
  min-height: 70px;
  line-height: 70px;
  text-align: left;
  background-color: #222629;
  border-bottom: 3px solid #86C232;
}

.menu a {
  float: left;
  text-decoration: none;
  color: white;
  line-height: 40px;
  height: 40px;
  padding: 5px 12.5px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 25px;
}

.menu a:hover {
  background-color: #6B6E70;
  text-decoration: underline;
  text-decoration-color: #86C232;
}

.logo {
  padding: 0 5px 0 5px;
  font-size: 34px;
}

.logo a {
  color: #86C232;
}

.logo a:hover {
  background-color: #222629;
}

label {
  margin: 0 0 0 20px;
  font-size: 26px;
  line-height: 70px;
  display: none;
  width: 26px;
  float: left;
}

#toggle {
  display: none;
}

/* Search Bar */

.search-box {
  position: absolute;
  top: 3.5%;
  left: 97.5%;
  transform: translate(-50%, -50%);
  background-color: #2F3640;
  height: 30px;
  border-radius: 30px;
  padding: 10px;
}

.search-box:hover {
  left: 92%;
}

.search-box:hover>.search-txt {
  width: 240px;
  padding: 0 6px;
}

.search-box:hover>.search-btn {
  background: white;
}

.search-btn {
  color: #E84118;
  float: right;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2F3640;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
  text-decoration: none;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 16px;
  transition: 0.4s;
  line-height: 30px;
  width: 0px;
}

/* Content Div */

#welcome {
  width: 100%;
  height: auto;
}

.welcome {
  color: white;
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  padding-top: 10%;
}

.content {
  margin: 0 12.5% 0 12.5%;
}

.categories-box-1,
.categories-box-2 {
  display: flex;
  flex-direction: column;
}

h3 {
  padding-left: 20%;
  text-align: center;
  text-decoration: underline;
}

.boxes {
  margin: 10px;
  width: 80%;
}

.boxes a {
  text-decoration: none;
  color: black;
}

.boxes ul {
  padding-left: 35%;
}

.boxes ul li {
  list-style: none;
  padding: 5px 10px 5px 10px;
}

.boxes ul li a:hover {
  border-bottom: 2px solid #86C232;
}

/* Footer */

.footer {
  color: white;
  float: left;
  width: 100%;
  text-align: center;
  background-color: #222629;
}

/* Media Query */

@media only screen and (max-width: 1400px) {
  /* Navigation */
  label {
    display: block;
    cursor: pointer;
  }
  .menu {
    margin: 0;
    width: 100%;
    display: none;
    text-align: center;
    background-color: #222629;
  }
  .menu a {
    float: none;
    clear: left;
    display: block;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #EAEAEB;
    margin: 0;
    padding: 0;
  }
  .menu a:hover {
    background-color: #6B6E70;
    text-decoration: underline;
    text-decoration-color: #86C232;
  }
  .menu .border-nav {
    border-top: 1px solid #EAEAEB;
  }
  #toggle:checked+.menu {
    display: block;
  }
  .logo {
    float: right;
    padding-right: 20px;
    padding-top: 10px;
  }
  .logo a {
    border: none;
  }
  .search-bar-input {
    padding-right: 38%;
  }
  /* Content */
  .categories-box-1,
  .categories-box-2 {
    display: flex;
    flex-direction: column;
  }
  .boxes {
    width: 95%;
  }
  .boxes ul {
    padding-left: 20%;
  }
}

@media only screen and (max-width: 680px) {
  .search-bar-input {
    padding-right: 8%;
    padding-bottom: 3.5%;
  }
  content {
    margin: 0 5% 0 5%;
  }
  #showcase #welcome {
    margin-top: -19px;
  }
  .boxes ul {
    padding-left: 20%;
  }
}

@media only screen and (max-width: 480px) {
  .search-bar-input {
    padding-right: 8%;
    padding-bottom: 3.5%;
  }
  .content {
    margin: 0 2% 0 2%;
  }
  h3 {
    padding-left: 0;
  }
  .boxes ul {
    padding-left: 2%;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Home | Physical Model </title>
  <!--Website CSS-->
  <link href="css/collapse.css" type="text/css" rel="stylesheet">
  <!-- Icon CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link href="css/application.css" type="text/css" rel="stylesheet">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <nav>
    <div class="nav">
      <label for="toggle">&#9776;</label>
      <input type="checkbox" id="toggle">
      <div class="menu">
        <div class="logo"><a><i class="fa fa-cog" ></i></a></div>
        <a href="index.html" classs="border-nav">Home</a>
        <a href="#construction">Construction</a>
        <a href="#dynamics">Dynamics</a>
        <a href="#fluids">Fluids</a>
        <a href="#heattran">Heat Transfer</a>
        <a href="#matsci">Material Science</a>
        <a href="#mechanics">Mechanics</a>
        <a href="#statics">Statics</a>
        <a href="#thermodynamics">Thermodynamics</a>
      </div>
    </div>
  </nav>

  <div class="container-4">
    <div class="search-box">
      <input class="search-txt" type="text" placeholder="Search..." name="">
      <a class="search-btn" href="#"><i class="fas fa-search"></i></a>
    </div>
  </div>

  <content>
    <div id="showcase">
      <img id="welcome" src="img/welcome.jpg" width="1900px" height="900px">
    </div>

    <div class="content">
      <div class="categories-box-1">
        <div id="box-1" class="boxes">
          <section id="construction">
            <h3>Construction</h3>
            <ul>
              <li><a href="html_categories/construction/const-a.html">Crane Rigging Angles</a></li>
              <li><a href="html_categories/construction/const-b.html">Excavation and Earthwork Pressure</a></li>
            </ul>
          </section>
        </div>
        <div id="box-2" class="boxes">
          <section id="dynamics">
            <h3>Dynamics</h3>
            <ul>
              <li><a href="html_categories/dynamics/dyn-a.html">Collision and Deformation: When Worlds Collide</a></li>
              <li><a href="html_categories/dynamics/dyn-b.html">General Planar Motion: Armor Attack</a></li>
              <li><a href="html_categories/dynamics/dyn-c.html">General Planar Motion: The Helicopter</a></li>
              <li><a href="html_categories/dynamics/dyn-d.html">General Planar Motion: The Oil Rig</a></li>
              <li><a href="html_categories/dynamics/dyn-e.html">General Planar Motion: The Slider</a></li>
              <li><a href="html_categories/dynamics/dyn-f.html">General Planar Motion: The Tank</a></li>
              <li><a href="html_categories/dynamics/dyn-g.html">Projectile Motion</a></li>
              <li><a href="html_categories/dynamics/dyn-h.html">Rectilinear Motion</a></li>
              <li><a href="html_categories/dynamics/dyn-i.html">Relative Motion: Choo Choo Train</a></li>
              <li><a href="html_categories/dynamics/dyn-j.html">Rotation: No Slip Wheel</a></li>
              <li><a href="html_categories/dynamics/dyn-k.html">Rotation and Moment of Inertia: A Day at the Races</a></li>
              <li><a href="html_categories/dynamics/dyn-l.html">Rotational Kinematics: The Ferris Wheel</a></li>
            </ul>
          </section>
        </div>
        <div id="box-3" class="boxes">
          <section id="fluids">
            <h3>Fluids</h3>
            <ul>
              <li><a href="html_categories/fluids/flu-a.html">Fluid Properties</a></li>
              <li><a href="html_categories/fluids/flu-b.html">Head Loss</a></li>
              <li><a href="html_categories/fluids/flu-c.html">Hydrostatics</a></li>
              <li><a href="html_categories/fluids/flu-d.html">Internal Flow and Losses</a></li>
              <li><a href="html_categories/fluids/flu-e.html">Laminar and Turbulent Flow: Smoke Tunnel</a></li>
            </ul>
          </section>
        </div>
        <div id="box-4" class="boxes">
          <section id="heattran">
            <h3>Heat Transfer</h3>
            <ul>
              <li><a href="html_categories/heat_transfer/heat-a.html">Conservation of Energy: Ice Melting Blocks</a></li>
              <li><a href="html_categories/heat_transfer/heat-b.html">Radiant Energy: Parabolic Concentrator</a></li>
            </ul>
          </section>
        </div>
      </div>

      <div class="categories-box-2">
        <div id="box-5" class="boxes">
          <section id="matsci">
            <h3>Material Science</h3>
            <ul>
              <li><a href="html_categories/material_science/matsci-a.html">Deformation: Bending a Knife Blade</a></li>
              <li><a href="html_categories/material_science/matsci-b.html">Deformation: Shape Memory Alloys</a></li>
              <li><a href="html_categories/material_science/matsci-c.html">Primary and Secondary Creep: Creepy Plastic</a></li>
            </ul>
          </section>
        </div>
        <div id="box-6" class="boxes">
          <section id="mechanics">
            <h3>Mechanics</h3>
            <ul>
              <li><a href="html_categories/mechanics/mech-a.html">Axial Strain</a></li>
              <li><a href="html_categories/mechanics/mech-b.html">Beam Bending: Foam Beam</a></li>
              <li><a href="html_categories/mechanics/mech-c.html">Design of Axial Members</a></li>
              <li><a href="html_categories/mechanics/mech-d.html">Elastic vs. Plastic</a></li>
              <li><a href="html_categories/mechanics/mech-e.html">Load Conditions: Rubber Shapes</a></li>
              <li><a href="html_categories/mechanics/mech-f.html">Paper Stress Concentrations</a></li>
              <li><a href="html_categories/mechanics/mech-g.html">Shear Demonstrator</a></li>
              <li><a href="html_categories/mechanics/mech-h.html">Stress/Strain: A Strainge Transformation</a></li>
              <li><a href="html_categories/mechanics/mech-i.html">Stress/Strain Transformation: The Big Book of Shear</a></li>
              <li><a href="html_categories/mechanics/mech-j.html">Thermal Expansion</a></li>
              <li><a href="html_categories/mechanics/mech-k.html">Thin Wall Pressure Vessels - Balloons</a></li>
              <li><a href="html_categories/mechanics/mech-l.html">Thin Wall Pressure Vessels - Hot Dogs</a></li>
              <li><a href="html_categories/mechanics/mech-m.html">Thin Wall Pressure Vessels</a>
                <li><a href="html_categories/mechanics/mech-n.html">Torsion: Tower of Torque</a></li>
            </ul>
          </section>
        </div>
        <div id="box-7" class="boxes">
          <section id="statics">
            <h3>Statics</h3>
            <ul>
              <li><a href="html_categories/statics/stat-a.html">Concentrated Cable Loads: The Ski Gondola</a></li>
              <li><a href="html_categories/statics/stat-b.html">Coulomb Friction: Fun with Friction</a></li>
              <li><a href="html_categories/statics/stat-c.html">Force Vector: Amazing Weight Loss Program</a></li>
              <li><a href="html_categories/statics/stat-d.html">Frame Demos</a></li>
              <li><a href="html_categories/statics/stat-e.html">Friction: Belt Friction</a></li>
              <li><a href="html_categories/statics/stat-f.html">Loading: Distributed Student Loading</a></li>
              <li><a href="html_categories/statics/stat-g.html">Mechanical Advantage: Pulleys - Equilibrator Challenge</a></li>
              <li><a href="html_categories/statics/stat-h.html">Mechanical Advantage: The Torque Tester</a></li>
              <li><a href="html_categories/statics/stat-i.html">Moments: Lug Wrench vs. Breaker Bar</a></li>
              <li><a href="html_categories/statics/stat-j.html">Moments: Moments and Couples</a></li>
              <li><a href="html_categories/statics/stat-k.html">Moments: The Persuader</a></li>
              <li><a href="html_categories/statics/stat-l.html">Moments: Varignon's I-Beam</a></li>
              <li><a href="html_categories/statics/stat-m.html">Truss Design: K'NEX Trusses</a></li>
              <li><a href="html_categories/statics/stat-n.html">Truss Design: Ruler Truss</a></li>
              <li><a href="html_categories/statics/stat-o.html">Truss Design: Wacky Fun Noodle</a></li>
              <li><a href="html_categories/statics/stat-p.html">Truss Design: Wooden Truss 2D</a></li>
              <li><a href="html_categories/statics/stat-q.html">Truss Design: Wooden Truss 3D</a></li>
              <li><a href="html_categories/statics/stat-r.html">Uniformly Loaded Cables</a></li>
              <li><a href="html_categories/statics/stat-s.html">Zero Force Members</a></li>
            </ul>
          </section>
        </div>
        <section id="thermodynamics">
          <div id="box-8" class="boxes">
            <h3>Thermodynamics</h3>
            <ul>
              <li><a href="html_categories/thermodynamics/therm-a.html">2nd Law - Direction</a></li>
              <li><a href="html_categories/thermodynamics/therm-b.html">2nd Law - Losses</a></li>
              <li><a href="html_categories/thermodynamics/therm-c.html">Boiling Point: The Hand Boiler</a></li>
              <li><a href="html_categories/thermodynamics/therm-d.html">Boiling Properties</a></li>
              <li><a href="html_categories/thermodynamics/therm-e.html">Closed vs. Open Systems</a></li>
              <li><a href="html_categories/thermodynamics/therm-f.html">Conservation of Mass: Molasses Madness</a></li>
              <li><a href="html_categories/thermodynamics/therm-g.html">Density and Buoyancy: The Lava Lamp</a></li>
              <li><a href="html_categories/thermodynamics/therm-h.html">Otto Cycle: Engine Knock</a></li>
              <li><a href="html_categories/thermodynamics/therm-i.html">Psychrometry</a></li>
              <li><a href="html_categories/thermodynamics/therm-j.html">Total Energy - Fan Box</a></li>
              <li><a href="html_categories/thermodynamics/therm-k.html">Total Energy</a></li>
              <li><a href="html_categories/thermodynamics/therm-l.html">Vapor Power Cycle: The Little Engine That Could</a></li>
            </ul>
          </div>
        </section>
      </div>
    </div>
  </content>

  <footer>
    <div class="footer">
      <p>Tyler Kautz, Trevor Swann, Jacob Stambaugh. Copyright &copy; 2019. Some Rights Reserved.</p>
    </div>
  </footer>
</body>

</html>

我的搜索栏图标遇到问题。当我将鼠标悬停在它上面时,它正在向下移动。谁能告诉我原因以及如何解决?我已经弄乱了边距,想尽一切办法修复它,但没有任何效果。如果有帮助,我还会在下面提供一个链接。

https://jsfiddle.net/tylerk9001/eb42nofx/

1 个答案:

答案 0 :(得分:1)

更改此:

deque

删除此:

.search-box {
    position: absolute;
    top: 3.5%;
    right: 0;
    background-color: #2F3640;
    height: 30px;
    border-radius: 30px;
    padding: 10px;
}