鼠标悬停时工具提示的宽度灵活，位置为绝对

时间：2018-07-23 11:11:50

标签： html css

下面是我的基本代码。 （{.iconWrap隐藏在真实场景中。在li悬停时可见。未添加悬停代码。）

.iconWrap的宽度必须灵活。这样它就可以根据其中的图标数量调整其宽度。目前，我已将width: 150px;赋予.iconWrap

如果您删除width: 150px;个图标，则它们会降到另一个。我想要的是

  1. 如果有一个图标，则宽度只能适合一个图标，并根据图标的数量增加。

  2. 如果图标超过5个，则第6个图标应低于第一个图标。

* {
  margin: 0;
  padding: 0
}

.nav {
  text-align: right;
}

.nav>li {
  display: inline-block;
  position: relative;
}

.nav>li>a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #222;
}

.nav>li>a:hover {
  background: #ccc;
}

.iconWrap {
  position: absolute;
  padding: 10px;
  background: #ccc;
  border: 1px solid #000;
  width: 150px;
  right: 0;
}

.iconWrap a {
  display: inline-block;
}

.iconWrap a i {
  display: block;
  height: 20px;
  width: 20px;
  background: #000
}
<div class="wrap">
  <ul class="nav">
    <li>
      <a href="#">Menu 1</a>

    </li>
    <li><a href="#">Menu 2</a>
      <div class="iconWrap">
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
      </div>
    </li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

4 个答案:

答案 0 :(得分：0)

在word-wrap: break-word;中使用.iconWrap属性

* {
  margin: 0;
  padding: 0
}

.nav>li {
  display: inline-block;
  position: relative;
}

.nav>li>a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #222;
}

.nav>li>a:hover {
  background: #ccc;
}

.iconWrap {
  word-wrap: break-word;
  position: absolute;
  padding: 10px;
  background: #ccc;
  border: 1px solid #000;
  width: 120px;
}

.iconWrap a {
  display: inline-block;
}

.iconWrap a i {
  display: block;
  height: 20px;
  width: 20px;
  background: #000
}
<div class="wrap">
  <ul class="nav">
    <li>
      <a href="#">Menu 1</a>

    </li>
    <li><a href="#">Menu 2</a>
      <div class="iconWrap">
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
      </div>
    </li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

答案 1 :(得分：0)

尝试一下。

* {
  margin: 0;
  padding: 0
}
.nav>li {
  position: relative;
  display: inline-block;  
}

.nav>li>a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #222;
}

.nav>li>a:hover {
  background: #ccc;
}

.iconWrap {
  position: absolute;
  padding: 10px;
  background: #ccc;
  border: 1px solid #000; 
  white-space:nowrap;
}

.iconWrap a {
  display: inline-block;
}

.iconWrap a i {
  display: block;
  height: 20px;
  width: 20px;
  background: #000
}
/****right-menu**/
.right-menu{
  margin-top:50px;
}
.right-menu .nav{
  text-align:right;
}
.right-menu .iconWrap {  
  right:0;
}
<div class="wrap">
  <ul class="nav">
    <li>
      <a href="#">Menu 1</a>

    </li>
    <li><a href="#">Menu 2</a>
      <div class="iconWrap">
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
      </div>
    </li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>
<!-- right-align menu -->
<div class="wrap right-menu">
  <ul class="nav">
    <li>
      <a href="#">Menu 1</a>

    </li>
    <li><a href="#">Menu 2</a>
      <div class="iconWrap">
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
      </div>
    </li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

答案 2 :(得分：0)

在max-width上将iconWrap max-width:120px添加到position，将.nav更改为li 

* {
  margin: 0;
  padding: 0
}
.nav{
position: relative;}
.nav>li {
  display: inline-block;
  
}

.nav>li>a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #222;
}

.nav>li>a:hover {
  background: #ccc;
}

.iconWrap {
  position: absolute;
  padding: 10px;
  background: #ccc;
  border: 1px solid #000;
  
max-width: 120px;
  
}

.iconWrap a {
  display: inline-block;
}

.iconWrap a i {
  display: block;
  height: 20px;
  width: 20px;
  background: #000
}
<div class="wrap">
  <ul class="nav">
    <li>
      <a href="#">Menu 1</a>

    </li>
    <li><a href="#">Menu 2</a>
      <div class="iconWrap">
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
      </div>
    </li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

答案 3 :(得分：0)

Display flex可以做到，只需在CSS中添加两行，如下所示：

* {
  margin: 0;
  padding: 0
}

.nav {
  text-align: right;
}

.nav>li {
  display: inline-block;
  position: relative;
}

.nav>li>a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #222;
}

.nav>li>a:hover {
  background: #ccc;
}

.iconWrap {
  position: absolute;
  padding: 10px;
  background: #ccc;
  border: 1px solid #000;
  display: flex; /* added */
  width: 145px; /* added */
  flex-wrap: wrap; /* added */
  right: 0;
}

.iconWrap a {
  margin: 2px; /* added */
  display: inline-block;
}

.iconWrap a i {
  display: block;
  height: 20px;
  width: 20px;
  background: #000
}
<div class="wrap">
  <ul class="nav">
    <li>
      <a href="#">Menu 1</a>

    </li>
    <li><a href="#">Menu 2</a>
      <div class="iconWrap">
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
        <a href="#"><i></i></a>
      </div>
    </li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

相关问题
最新问题