H1 元素的宽度

Question

我正在制作一个网站的标题，但我运行遇到了问题。屏幕左侧有一些文本，右侧是语言 select 菜单，使用下拉菜单。但是，如果我将鼠标悬停在整个标题上，下拉菜单就会展开。我只希望在我真正将鼠标悬停在语言 select 上时发生这种情况。这里有一些代码：

header > h1 {
    font-weight: bold;
    font-size: 40px;
    margin-left: 30px;
    margin-top: 4%;
}

#hr1 {
    background-color: #FFF;
    height: 3px;
    width: 50%;
    margin-left: 30px;
    margin-top: 10px;
}

.dropdown {
    text-align: right;
    margin-right: 30px;
    margin-top: -57px;
    background: pink;
}

.dropdown-div {
    font-weight: bold;
    font-size: 40px;
    color: #FFF;
    cursor: pointer;
}

.dropdown-items {
    display: none;
}

.dropdown:hover .dropdown-items {
    display: block;
}

.dropdown-items > button {
    background-color: #0E3854;
    border: none;
    cursor: pointer;
}

.dropdown-items #dropdown-item1 {
    display: none;
    margin-bottom: 10px;
}

.dropdown-item {
    display: block;
    color: #FFF;
    font-size: 20px;
    margin-top: 10px;
    margin-left: auto;
}

#dropdown-item2 {
    margin-bottom: 10px;
}

#hr2 {
    background: #FFF;
    height: 3px;
    width: 7%;
    margin-left: auto;
    margin-right: 30px;
    margin-top: -3px;
}

<header>
  <h1>The right side of the page</h1>
</header>
<hr id="hr1">
<div class="dropdown">
  <h1 class="dropdown-div" id="dropdown-div-text">Taal</h1>
    <div class="dropdown-items">
      <button onclick="languageSelectDutch()" class="dropdown-item" id="dropdown- 
      item1">Nederlands</button>
      <button onclick="languageSelectEnglish()" class="dropdown-item" id="dropdown- 
      item2">Engels</button>
    </div>
</div>

希望有人有解决办法！

Answer 1

所以html结构并不理想。我运行代码并在 .dropdown class 中添加了以下内容： width:100px;float:right; 如果下拉元素占据整个屏幕，它将悬停在屏幕上。您指定 text-align:right 但 div 仍然占据整个屏幕。我提供的代码可以工作，但不是一个很好的解决方案，它会在不同的视口大小下表现不佳。要以正确的方式做到这一点，您可能需要使用 flexbox。强烈推荐看这个guide.

Answer 2

下面是使用包装器对下拉列表进行对齐的开始。您还有其他布局问题需要解决，但我不确定您的预期结果。

header>h1 {
  font-weight: bold;
  font-size: 40px;
  margin-left: 30px;
  margin-top: 4%;
}

.dropdown-wrapper {
  text-align: right;
  margin-right: 30px;
  margin-top: -57px;
}

.dropdown {
  display: inline-block; /* make this element shrink to contents */
}

.dropdown-div {
  font-weight: bold;
  font-size: 40px;
  color: #FFF;
  cursor: pointer;
  background: pink;
}

.dropdown-items {
  display: none;
}

.dropdown:hover .dropdown-items {
  display: block;
}

.dropdown-items>button {
  background-color: #0E3854;
  border: none;
  cursor: pointer;
}

.dropdown-items #dropdown-item1 {
  margin-bottom: 10px;
}

.dropdown-item {
  color: #FFF;
  font-size: 20px;
  margin-top: 10px;
  margin-left: auto;
}

#dropdown-item2 {
  margin-bottom: 10px;
}

<header>
  <h1>The right side of the page</h1>
</header>

<hr id="hr1">

<div class="dropdown-wrapper">
  <div class="dropdown">
    <h1 class="dropdown-div" id="dropdown-div-text">Taal</h1>

    <div class="dropdown-items">
      <button onclick="languageSelectDutch()" class="dropdown-item" id="dropdown- 
      item1">Nederlands</button>
      <button onclick="languageSelectEnglish()" class="dropdown-item" id="dropdown- 
      item2">Engels</button>
    </div>
  </div>
</div>

H1 元素的宽度

Width of a H1 element

html

css

heading