如何将下拉菜单设置为与其最大内容一样宽？

时间：2016-08-23 07:47:46

标签： html css

我希望菜单在隐藏项目后保持其大小。如果我在下拉项目上使用display:none，则菜单将变得与所选项目一样宽。因此，当在悬停时再次显示项目时，如果任何隐藏项目比所选项目更宽，则菜单变得更宽，看起来很糟糕。但是，如果我只隐藏它们，下拉项仍然可以激活悬停事件，因此如果您将鼠标悬停在隐藏的位置，则会显示下拉列表。

您可以在下面看到此问题（查看整页）：

＆＃13;
＆＃13; 
@import 'https://fonts.googleapis.com/css?family=Roboto:300';

body {
  margin:0px;
  color:#25373D;
  font-family: 'Roboto', sans-serif;
  background-color:#DAE5E8;
}

#Title {
  width:100vw;
  text-align:center;
  padding:0.1in;
  font-size:0.3in;
}

#Settings {
  background-color:#25373D;
  width:100vw;
  height:0.85in;
  display:flex;
  align-items: flex-start;
  justify-content:center;
}

.dash {
  margin:0.1in 0 0.1in 0;
  position:relative;
  font-size:0.2in;
  color:white;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  padding:0.2in;

}

.select-input {
  margin:0.1in;
  position:relative;
  font-size:0.2in;
  color:white;
  cursor:pointer;
}

.select-input > div {
  visibility:hidden;
  text-align:center;
  align-items: center;
  justify-content: center;
  padding:0.2in;
  background-color:#040C0F;
  display:flex;
}

.select-input > div:hover {
  visibility:visible;
  background-color:#5E7B85;
}


.select-input:hover > div {
  visibility:visible;
}

.select-input > .selected {
  visibility:visible;
  background-color:#040C0F !important;
}

input {
  outline: none;
}
＆＃13; 
<div id="Title">Smite Team Guru</div>
<div id="Settings">
  <div class="select-input" id="Mode">
    <div class="selected" data-value="Conquest">Conquest</div>
    <div data-value="Joust">Joust</div>
    <div data-value="Arena">Arena</div>
    <div data-value="Clash">Clash</div>
    <div data-value="Siege">Siege</div>
  </div>
  <div class="select-input" id="Type">
    <div class="selected" data-value="Casual">Casual</div>
    <div data-value="Ranked">Ranked</div>
  </div>
  <div class="select-input" id="Min-Rank">
    <div class="selected" data-value="Qualifying">Qualifying</div>
    <div data-value="Bronze">Bronze</div>
    <div data-value="Silver">Silver</div>
    <div data-value="Gold">Gold</div>
    <div data-value="Platinum">Platinum</div>
    <div data-value="Diamond">Diamond</div>
    <div data-value="Grand Master">Master</div>
  </div>
  <div class="dash">-</div>
  <div class="select-input" id="Max-Rank">
    <div class="selected" data-value="Grand Master">Master</div>
    <div data-value="Qualifying">Qualifying</div>
    <div data-value="Bronze">Bronze</div>
    <div data-value="Silver">Silver</div>
    <div data-value="Gold">Gold</div>
    <div data-value="Platinum">Platinum</div>
    <div data-value="Diamond">Diamond</div>
  </div>
  <div class="select-input" id="Time-Span">
    <div class="selected" data-value="Qualifying">1 Week</div>
    <div data-value="Qualifying">2 Weeks</div>
    <div data-value="Qualifying">1 Month</div>
    <div data-value="Qualifying">2 Months</div>
    <div data-value="Qualifying">3 Months</div>
    <div data-value="Qualifying">6 Months</div>
    <div data-value="Qualifying">2000 B.C.</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

使用纯CSS，我能用最干净的方式做到这一点是什么？如果我们可以在css中使用逻辑，如

if (.selected:hover) .select-input > div { visibility:auto };
然后那很好，但我不知道任何选择器能够达到那种选择逻辑。

3 个答案:

答案 0 :(得分：1)

将 .select-input 的高度设置为0，它会匹配您的希望。

＆＃13;
＆＃13; 
@import 'https://fonts.googleapis.com/css?family=Roboto:300';

body {
  margin:0px;
  color:#25373D;
  font-family: 'Roboto', sans-serif;
  background-color:#DAE5E8;
}

#Title {
  width:100vw;
  text-align:center;
  padding:0.1in;
  font-size:0.3in;
}

#Settings {
  background-color:#25373D;
  width:100vw;
  height:0.85in;
  display:flex;
  align-items: flex-start;
  justify-content:center;
}

.dash {
  margin:0.1in 0 0.1in 0;
  position:relative;
  font-size:0.2in;
  color:white;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  padding:0.2in;

}

.select-input {
  height:0;
  margin:0.1in;
  position:relative;
  font-size:0.2in;
  color:white;
  cursor:pointer;
}

.select-input > div {
  visibility:hidden;
  text-align:center;
  align-items: center;
  justify-content: center;
  padding:0.2in;
  background-color:#040C0F;
  display:flex;
}

.select-input > div:hover {
  visibility:visible;
  background-color:#5E7B85;
}


.select-input:hover >div {
  visibility:visible;
}

.select-input > .selected {
  visibility:visible;
  background-color:#040C0F !important;
}

input {
  outline: none;
}
＆＃13; 
<div id="Title">Smite Team Guru</div>
<div id="Settings">
  <div class="select-input" id="Mode">
    <div class="selected" data-value="Conquest">Conquest</div>
    <div data-value="Joust">Joust</div>
    <div data-value="Arena">Arena</div>
    <div data-value="Clash">Clash</div>
    <div data-value="Siege">Siege</div>
  </div>
  <div class="select-input" id="Type">
    <div class="selected" data-value="Casual">Casual</div>
    <div data-value="Ranked">Ranked</div>
  </div>
  <div class="select-input" id="Min-Rank">
    <div class="selected" data-value="Qualifying">Qualifying</div>
    <div data-value="Bronze">Bronze</div>
    <div data-value="Silver">Silver</div>
    <div data-value="Gold">Gold</div>
    <div data-value="Platinum">Platinum</div>
    <div data-value="Diamond">Diamond</div>
    <div data-value="Grand Master">Master</div>
  </div>
  <div class="dash">-</div>
  <div class="select-input" id="Max-Rank">
    <div class="selected" data-value="Grand Master">Master</div>
    <div data-value="Qualifying">Qualifying</div>
    <div data-value="Bronze">Bronze</div>
    <div data-value="Silver">Silver</div>
    <div data-value="Gold">Gold</div>
    <div data-value="Platinum">Platinum</div>
    <div data-value="Diamond">Diamond</div>
  </div>
  <div class="select-input" id="Time-Span">
    <div class="selected" data-value="Qualifying">1 Week</div>
    <div data-value="Qualifying">2 Weeks</div>
    <div data-value="Qualifying">1 Month</div>
    <div data-value="Qualifying">2 Months</div>
    <div data-value="Qualifying">3 Months</div>
    <div data-value="Qualifying">6 Months</div>
    <div data-value="Qualifying">2000 B.C.</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你的问题是使用visibility：hidden只隐藏div，同时仍然在页面上分配空间。最好使用display：none，然后在悬停时设置显示。

试试这个Code Pen

＆＃13;
＆＃13; 
spawn(fn -> Foo.print_foo end)
＆＃13; 
@import 'https://fonts.googleapis.com/css?family=Roboto:300';

body {
  margin:0px;
  color:#25373D;
  font-family: 'Roboto', sans-serif;
  background-color:#DAE5E8;
}

#Title {
  width:100vw;
  text-align:center;
  padding:0.1in;
  font-size:0.3in;
}

#Settings {
  background-color:#25373D;
  width:100vw;
  height:0.85in;
  display:flex;
  align-items: flex-start;
  justify-content:center;
}

.dash {
  margin:0.1in 0 0.1in 0;
  position:relative;
  font-size:0.2in;
  color:white;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  padding:0.2in;

}

.select-input {
  margin:0.1in;
  position:relative;
  font-size:0.2in;
  color:white;
  cursor:pointer;
}

.select-input > div {
  display: none;
  text-align:center;
  align-items: center;
  justify-content: center;
  padding:0.2in;
  background-color:#040C0F;
}

.select-input > div:hover {
  visibility:visible;
  background-color:#5E7B85;
}


.select-input:hover > div {
    display:flex;
  visibility:visible;
}

.select-input > .selected {
  display:flex;
  visibility:visible;
  background-color:#040C0F !important;
}

input {
  outline: none;
}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我的建议是尝试使用

  • 。我知道，也许我的答案可能有任何帮助。

    ＆＃13;
    ＆＃13; 
    .nav ul{list-style: none;}
.nav ul li{float: left; padding-left: 20px; padding-right: 20px; position: relative;}
.nav ul a{display: table-cell; vertical-align: middle; height: 39px; text-decoration: none; color: #e8b400;}
.nav li > ul{display: none; position: absolute; z-index: 2;top: 100%; left: 0px; border-radius: 0px 0px 10px 10px;}
.nav li:hover > ul{display: block; background-color: #9f6900;}
.nav li > ul > li {width: 150px; height: 40px;}
.nav li > ul > li > ul{left: 100%; top:0px; border-radius: 10px 10px 10px 10px;}
.nav li > ul > li > ul > li{width: 100px;}
.nav li:hover > a{color: #e4c300;}
    ＆＃13;
    ＆＃13;
    ＆＃13;

    • 相关问题
    最新问题