H1 元素的宽度

如何解决H1 元素的宽度

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

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>

希望有人有解决方案！

解决方法

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

,

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

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>