H1 元素的宽度

Question

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

 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 类中： width:100px;float:right; 如果下拉元素占据整个屏幕，它将悬停在屏幕上。 您指定text-align:right但 div 仍然占据整个屏幕。 我提供的代码可以工作，但不是一个很好的解决方案，它会在不同的视口大小下出现异常。 要以正确的方式执行此操作，您可能需要使用 flexbox。 强烈建议您查看本指南。

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>