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>