Question

我有一个标题，其中放置了一个表格菜单，但是当您将鼠标悬停在特定的border-bottom上时td出现时，我遇到了一些问题border-bottom当您将鼠标悬停在它上方时会出现，但当您将鼠标悬停在页面的另一部分时，边框将会停留。（边框也会在标题的下边框上方显示几个像素。）*我自己已经解决了这个问题，忘了先删除calc()语句

此外，我想知道为什么td中的文字会自动垂直居中。也许我忽视了一些事情，请帮帮忙？

* {
  padding: 0;
  margin: 0 auto;
}
header {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  margin-left: 0 auto;
  margin-right: 0 auto;
  height: 80px;
  background-color: rgb(50, 50, 50);
}
#header_container {
  width: 100%;
  height: 100%;
  max-width: 1000px;
  border: 0px solid black;
}
#menu_container {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}
#menu_container tr {
  width: 100%;
  height: 100%;
}
#menu_container td {
  height: 100%;
  width: 25%;
  text-align: center;
  color: rgb(203, 207, 218);
  font-family: Signika;
  font-size: 30px;
}
.menuItem {
  padding-top: 14px;
  border: 0;
}
.menuItem:hover {
  border-bottom: 1px solid blue;
}
#logo {
  width: 50%;
  height: auto;
}

<header>
  <div id="header_container">
    <table id="menu_container">
      <tr>
        <td>
          <img id="logo" src="img/desygn%20logo%20website.png">
        </td>
        <td class="menuItem">Home</td>
        <td class="menuItem">Over</td>
        <td class="menuItem">Contact</td>
      </tr>
    </table>
  </div>
</header>

Answer 1

徽标图片大小令人不安的safari浏览器，已经修复

#logo {
  max-width: 100%;
  height: auto;
}

希望这个解决方案适合你:)

＆＃13;

* {
  padding: 0;
  margin: 0 auto;
}
header {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  margin-left: 0 auto;
  margin-right: 0 auto;
  height: 80px;
  background-color: rgb(50, 50, 50);
}
#header_container {
  width: 100%;
  height: 100%;
  max-width: 1000px;
  border: 0px solid black;
}
#menu_container {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}
#menu_container tr {
  width: 100%;
  height: 100%;
}
#menu_container td {
  height: 100%;
  width: 25%;
  text-align: center;
  color: rgb(203, 207, 218);
  font-family: Signika;
  font-size: 30px;
}
.menuItem {
  padding-top: 14px;
  border: 0;
  border-bottom: 1px solid  rgb(50, 50, 50);
  box-sizing: border-box;
}
.menuItem:hover {
  border-bottom-color: blue;
}
#logo {
  max-width: 100%;
  height: auto;
}

＆＃13;

<header>
  <div id="header_container">
    <table id="menu_container">
      <tr>
        <td>
          <img id="logo" src="img/desygn%20logo%20website.png">
        </td>
        <td class="menuItem">Home</td>
        <td class="menuItem">Over</td>
        <td class="menuItem">Contact</td>
      </tr>
    </table>
  </div>
</header>

＆＃13;

悬停问题和文本自动中心的边框底部

1 个答案: