Question

我正在为某人创建一个网站。在顶部，我有一个带链接的栏和下拉菜单，左侧有一个徽标。由于某种原因，图像不断弄乱下拉列表。它功能齐全，但视觉上很混乱。要查看我的意思，将鼠标悬停在下拉列表上，按钮会扩展到栏之外。

我尝试将图像包装在div中，为图像设置边距和填充，并使用不同的图像，但都没有效果。如果我将图像指向无效的URL，它可以工作，但显然我想要一个真实的图像。

代码：

function hide(element) {
  element.className += " hidden";
}

function unhide(element) {
  element.className = element.className.replace(/\bhidden\b/, "");
}

function toggle(button) {
  var list = document.getElementById(button.getAttribute("data-list"));
  (list.className.search(/\bhidden\b/) > -1) ? unhide(list): hide(list);
  window.onclick = function(e) {
    if (!e.target.matches(".drop-button") && !e.target.matches(".drop-choices")) {
      hide(list);
    }
  };
}

#back-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50px;
  background-color: green;
}

#bar-top {
  position: absolute;
  display: table;
  height: 50px;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  background-color: green;
}

.nav-link {
  text-decoration: none;
}

.nav-option {
  display: table-cell;
  font-size: 16px;
  top: 0;
  color: white;
  width: 200px;
  cursor: pointer;
}

#nav-logo {
  width: 40px;
  height: 40px;
  top: 2px;
  padding: 0;
}

.drop-button {
  margin: 0;
  font-size: 16px;
  color: white;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: none;
  text-align: left;
  background-color: inherit;
}

.nav-option:hover,
.nav-option:active,
.nav-option:focus,
.drop-button:hover,
.drop-button:active,
.drop-button:focus {
  background-color: blue;
  outline: none;
}

.drop-choices {
  font-size: 16px;
  overflow: auto;
  max-height: calc(100vh - 50px);
  display: block;
  position: absolute;
  background-color: lightgray;
  min-width: 140px;
  z-index: 5;
}

.drop-choices p {
  color: black;
  padding-top: 6px;
  padding-bottom: 6px;
  cursor: pointer;
  margin: 0;
  width: 188px;
  text-align: left;
}

.drop-choices p:hover,
.drop-choices p:focus {
  background-color: blue;
  outline: none;
}

p.drop-title {
  cursor: initial;
}

p.drop-title:hover {
  background-color: #f9f9f9;
}

.hidden {
  display: none;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Home - Jessica Keirns</title>
  <link type="text/css" rel="stylesheet" href="topbar.css" />
</head>

<body>
  <div id="back-top">
    <div id="bar-top">
      <a href="/main.xhtml" class="nav-link">
        <img src="https://www.thsp.co.uk/wp-content/uploads/2016/11/Icon-Placeholder.png" alt="Home" width="40px" height="40px" />
      </a>
      <div class="nav-option drop-down" data-list="test" onclick="toggle(this)">
        <button class="drop-button">Dropdown</button>
        <div id="test" class="drop-choices hidden">
          <p tabindex="0" id="choice1">choice1</p>
          <p tabindex="0" id="choice2">choice2</p>
        </div>
      </div>
      <a href="/about.xhtml" class="nav-option nav-link">About Me</a>
    </div>
  </div>
  <script type="application/javascript" src="drop.js"></script>
</body>

</html>

Answer 1

添加vertical-align: middle;以使对齐位于中间。

但是，我不建议您使用css样式代码如何使用。在开始之前，您应该study关于table，table-row，inline-block和table-cell。因为表格应该采用table-cell之类的正确格式，因此只应在table-row内table-row内table内inline-block。如果你感到困惑，只需使用function hide(element) { element.className += " hidden"; } function unhide(element) { element.className = element.className.replace(/\bhidden\b/, ""); } function toggle(button) { var list = document.getElementById(button.getAttribute("data-list")); (list.className.search(/\bhidden\b/) > -1) ? unhide(list): hide(list); window.onclick = function(e) { if (!e.target.matches(".drop-button") && !e.target.matches(".drop-choices")) { hide(list); } }; }这很容易理解

#back-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50px;
  background-color: green;
}

#bar-top {
  position: absolute;
  display: table;
  height: 50px;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  background-color: green;
}

.nav-link {
  text-decoration: none;
}

.nav-option {
  display: table-cell;
  font-size: 16px;
  top: 0;
  color: white;
  width: 200px;
  cursor: pointer;
  vertical-align: middle;
}

#nav-logo {
  width: 40px;
  height: 40px;
  top: 2px;
  padding: 0;
}

.drop-button {
  margin: 0;
  font-size: 16px;
  color: white;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: none;
  text-align: left;
  background-color: inherit;
}

.nav-option:hover,
.nav-option:active,
.nav-option:focus,
.drop-button:hover,
.drop-button:active,
.drop-button:focus {
  background-color: blue;
  outline: none;
}

.drop-choices {
  font-size: 16px;
  overflow: auto;
  max-height: calc(100vh - 50px);
  display: block;
  position: absolute;
  background-color: lightgray;
  min-width: 140px;
  z-index: 5;
}

.drop-choices p {
  color: black;
  padding-top: 6px;
  padding-bottom: 6px;
  cursor: pointer;
  margin: 0;
  width: 188px;
  text-align: left;
}

.drop-choices p:hover,
.drop-choices p:focus {
  background-color: blue;
  outline: none;
}

p.drop-title {
  cursor: initial;
}

p.drop-title:hover {
  background-color: #f9f9f9;
}

.hidden {
  display: none;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Home - Jessica Keirns</title>
  <link type="text/css" rel="stylesheet" href="topbar.css" />
</head>

<body>
  <div id="back-top">
    <div id="bar-top">
      <a href="/main.xhtml" class="nav-link">
        <img src="https://www.thsp.co.uk/wp-content/uploads/2016/11/Icon-Placeholder.png" alt="Home" width="40px" height="40px" />
      </a>
      <div class="nav-option drop-down" data-list="test" onclick="toggle(this)">
        <button class="drop-button">Dropdown</button>
        <div id="test" class="drop-choices hidden">
          <p tabindex="0" id="choice1">choice1</p>
          <p tabindex="0" id="choice2">choice2</p>
        </div>
      </div>
      <a href="/about.xhtml" class="nav-option nav-link">About Me</a>
    </div>
  </div>
  <script type="application/javascript" src="drop.js"></script>
</body>

</html>

public class StoreDbDataSet
{
    internal static DataSet ReadDataSet()
    {
        DataSet ds = new DataSet();
        ds.ReadXmlSchema("store.xsd");
        ds.ReadXml("store.xml");
        return ds;
    }

}

Answer 2

我使用了一个flexbox来正确对齐标题内容。

function hide(element) {
  element.className += " hidden";
}

function unhide(element) {
  element.className = element.className.replace(/\bhidden\b/, "");
}

function toggle(button) {
  var list = document.getElementById(button.getAttribute("data-list"));
  (list.className.search(/\bhidden\b/) > -1) ? unhide(list): hide(list);
  window.onclick = function(e) {
    if (!e.target.matches(".drop-button") && !e.target.matches(".drop-choices")) {
      hide(list);
    }
  };
}

#back-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50px;
  background-color: green;
}

#bar-top {
  display: flex;
  align-items: center;
  margin-left: 5px;
  height: 50px;
}

.nav-link {
  text-decoration: none;
}

.nav-option {
  font-size: 16px;
  color: white;
  width: 200px;
  cursor: pointer;
}

#nav-logo {
  width: 40px;
  height: 40px;
}

.drop-button {
  margin: 0;
  font-size: 16px;
  color: white;
  cursor: pointer;
  border: none;
  text-align: left;
  background-color: inherit;
}

.nav-option:hover,
.nav-option:active,
.nav-option:focus,
.drop-button:hover,
.drop-button:active,
.drop-button:focus {
  background-color: blue;
  outline: none;
}

.drop-choices {
  font-size: 16px;
  overflow: auto;
  max-height: calc(100vh - 50px);
  display: block;
  position: absolute;
  background-color: lightgray;
  min-width: 140px;
  z-index: 5;
}

.drop-choices p {
  color: black;
  padding-top: 6px;
  padding-bottom: 6px;
  cursor: pointer;
  margin: 0;
  width: 188px;
  text-align: left;
}

.drop-choices p:hover,
.drop-choices p:focus {
  background-color: blue;
  outline: none;
}

p.drop-title {
  cursor: initial;
}

p.drop-title:hover {
  background-color: #f9f9f9;
}

.hidden {
  display: none;
}

<div id="back-top">
  <div id="bar-top">
    <a href="/main.xhtml" class="nav-link">
      <img src="https://www.thsp.co.uk/wp-content/uploads/2016/11/Icon-Placeholder.png" alt="Home" width="40px" height="40px" />
    </a>
    <div class="nav-option drop-down" data-list="test" onclick="toggle(this)">
      <button class="drop-button">Dropdown</button>
      <div id="test" class="drop-choices hidden">
        <p tabindex="0" id="choice1">choice1</p>
        <p tabindex="0" id="choice2">choice2</p>
      </div>
    </div>
    <a href="/about.xhtml" class="nav-option nav-link">About Me</a>
  </div>
</div>

添加图像会破坏我的导航栏下拉列表

2 个答案: