Question

我无法弄清楚为什么导航栏中有两个方框。

如果您以Home为例，则有两个框，一个用于保存Home的文本，另一个用于向右突出。

为了清洁原因，我想缩小突出框与保留Home, Projects, About Me and Resume的文本框相同，因为当您将鼠标悬停在项目的右侧时，会出现菜单。

https://codepen.io/anon/pen/vJjvWG?editors=1100#0

＆＃13;

* {
  border: 1px solid rgba(0, 0, 0, 0.3);
}

header {
  position: fixed;
  width: 100%;
  background: #4168a8;
}

.container {
  width: 90%;
  height: 75px;
  margin: 0 auto;
}

nav {
  color: white;
  float: left;
  font-size: 14px;
  font-family: Raleway;
  text-decoration: none;
  margin-top: 11px;
  -webkit-font-smoothing: antialiased;
}

nav li {
  display: inline;
  list-style: none;
}

.title {
  color: #DB5461;
  font-size: 24px;
  font-family: Raleway;
  text-decoration: none;
  margin-right: 35px;
  letter-spacing: 1px;
  text-transform: lowercase;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
}

nav a {
  color: white;
  text-decoration: none;
  margin-right: 35px;
  position: relative;
  display: inline-block;
  padding: .4em;
  padding-left: .2em;
  padding-right: .2em;
  text-transform: uppercase;
}

.projects {
  padding-bottom: 10px;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  width: 91px;
  text-align: center;
  margin-top: 10px;
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #f9f9f9;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  text-decoration: none;
  display: block;
  text-transform: lowercase;
  margin: 0px;
  font-size: 14px;
}

.dropdown:hover>.dropdown-content {
  display: block;
}

.dropdown-content a:hover {
  /* When you hover over items in dropdown */
  background-color: #ddd;
}

.underline_animation::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #222;
  -webkit-transform: scaleX(0);
  visibility: hidden;
  -webkit-transition: all .6s ease;
}

.underline_animation:hover::after {
  -webkit-transform: scaleX(1);
  visibility: visible;
}

.links {
  float: right;
  margin-top: 26px;
}

.links a {
  margin-left: 20px;
  text-decoration: none;
  display: inline-block;
}

.links a:hover {
  opacity: 0.7;
}

body {
  margin: 0;
  background: #222;
}

＆＃13;

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Belleza" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="style.css" type="text/css" rel="stylesheet">
  <title>mytitle</title>
  <link rel="icon" href="images/favicon.png">
</head>

<body>
  <header>
    <div class="container">

      <nav>
        <a href="#" class="title">my title</a>
        <a>|</a>

        <li>
          <a href="#" class="underline_animation">home</a>
        </li>

        <li class="dropdown">
          <a href="#" class="projects">projects&nbsp; &#9662;</a>
          <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </li>

        <li>
          <a href="#" class="underline_animation">about me</a>
        </li>

        <li>
          <a href="files/resume.pdf" class="underline_animation">resume</a>
        </li>
      </nav>

      <div class="links">
        <a href="#" target="_blank">
          <img src="images/linkedin_icon.png" height="25" width="25">
        </a>
        <a href="#" target="_blank">
          <img src="images/github_icon.png" height="25" width="25">
        </a>
      </div>

    </div>
  </header>
</body>
</html>

＆＃13;

Answer 1

将margin-right: 0添加到nav li a，并将35px保证金设置为nav li - 请参阅下面的演示：

＆＃13;

* {
  border: 1px solid rgba(0, 0, 0, 0.3);
}

header {
  position: fixed;
  width: 100%;
  background: #4168a8;
}

.container {
  width: 90%;
  height: 75px;
  margin: 0 auto;
}

nav {
  color: white;
  float: left;
  font-size: 14px;
  font-family: Raleway;
  text-decoration: none;
  margin-top: 11px;
  -webkit-font-smoothing: antialiased;
}

nav li {
  display: inline;
  list-style: none;
  margin-right: 35px; /*ADDED THIS*/
}

.title {
  color: #DB5461;
  font-size: 24px;
  font-family: Raleway;
  text-decoration: none;
  margin-right: 35px;
  letter-spacing: 1px;
  text-transform: lowercase;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
}

nav a {
  color: white;
  text-decoration: none;
  margin-right: 35px;
  position: relative;
  display: inline-block;
  padding: .4em;
  padding-left: .2em;
  padding-right: .2em;
  text-transform: uppercase;
}
nav li a { /*ADDED THIS*/
  margin-right: 0;
}

.projects {
  padding-bottom: 10px;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  width: 91px;
  text-align: center;
  margin-top: 10px;
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #f9f9f9;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  text-decoration: none;
  display: block;
  text-transform: lowercase;
  margin: 0px;
  font-size: 14px;
}

.dropdown:hover >.dropdown-content {
  display: block;
}

.dropdown-content a:hover {
  /* When you hover over items in dropdown */
  background-color: #ddd;
}

.underline_animation::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #222;
  -webkit-transform: scaleX(0);
  visibility: hidden;
  -webkit-transition: all .6s ease;
}

.underline_animation:hover::after {
  -webkit-transform: scaleX(1);
  visibility: visible;
}

.links {
  float: right;
  margin-top: 26px;
}

.links a {
  margin-left: 20px;
  text-decoration: none;
  display: inline-block;
}

.links a:hover {
  opacity: 0.7;
}

body {
  margin: 0;
  background: #222;
}

＆＃13;

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Belleza" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="style.css" type="text/css" rel="stylesheet">
  <title>mytitle</title>
  <link rel="icon" href="images/favicon.png">
</head>

<body>

  <header>
    <div class="container">

      <nav>
        <a href="#" class="title">my title</a>
        <a>|</a>

        <li>
          <a href="#" class="underline_animation">home</a>
        </li>

        <li class="dropdown">
          <a href="#" class="projects">projects&nbsp; &#9662;</a>
          <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </li>

        <li>
          <a href="#" class="underline_animation">about me</a>
        </li>

        <li>
          <a href="files/resume.pdf" class="underline_animation">resume</a>
        </li>
      </nav>

      <div class="links">
        <a href="#" target="_blank">
          <img src="images/linkedin_icon.png" height="25" width="25">
        </a>
        <a href="#" target="_blank">
          <img src="images/github_icon.png" height="25" width="25">
        </a>
      </div>

    </div>
  </header>




</body>

</html>

＆＃13;

更改选择框的大小以匹配文本框

1 个答案: