Question

我为我的项目创建了一个选项按钮。代码如下所示。我试图正确对齐.dotlist在右侧移动。我应该在点按钮的左侧。制作完美的点下拉按钮，从而使列表正确显示的解决方案是什么。

$('.dottbtn').on('click', function(e) {
  e.stopPropagation();
  $('.dotmenu').toggleClass('dotopened');
});
$(document).on('click', function() {
  $('.dotmenu').removeClass('dotopened');
});

body {
  margin: 0;
  background: tomato;
  font-family: 'Open Sans', sans-serif;
}

.dotted {
  display: inline-block;
  vertical-align: top;
  float: right;
}

.dottbtn {
  cursor: pointer;
  margin-top: 5px;
  width: 40px;
  height: 20px;
  z-index: 80;
  position: relative;
  align-items: flex-end;
}

.dottbtn {
  background: url('https://image.flaticon.com/icons/svg/483/483345.svg');
  background-size: 17px 17px;
  height: 17px;
  width: 17px;
}

.dotmenu {
  width: 150px;
  border-radius: 10px;
  margin-top: 20px;
  display: inline-block;
  float: right;
  background: #fff;
  position: absolute;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
  z-index: 90;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.dotmenu.dotopened {
  visibility: visible;
  opacity: 1;
}

.dotmenu::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 7px;
  width: 15px;
  height: 15px;
  background: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.dotmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dotmenu ul.dot-list {
  text-align: left;
  font-weight: 100;
  width: 100%;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.dotmenu ul.dot-list li a {
  text-decoration: none;
  padding-left: 20px;
  padding-top: 5px;
  color: #343434;
  font-weight: 600;
  display: block;
  line-height: 27px;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.dotmenu ul.dot-list li a:hover {
  color: tomato;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dotted">
  <div class="dottbtn"></div>
  <div class="dotmenu">
    <ul class="dot-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

请帮助我克服它。

Answer 1

将right:0;添加到您的.dotmenu即可解决。

$('.dottbtn').on('click', function(e) {
  e.stopPropagation();
  $('.dotmenu').toggleClass('dotopened');
});
$(document).on('click', function() {
  $('.dotmenu').removeClass('dotopened');
});

body {
  margin: 0;
  background: tomato;
  font-family: 'Open Sans', sans-serif;
}

.dotted {
  display: inline-block;
  vertical-align: top;
  float: right;
}

.dottbtn {
  cursor: pointer;
  margin-top: 5px;
  width: 40px;
  height: 20px;
  z-index: 80;
  position: relative;
  align-items: flex-end;
}

.dottbtn {
  background: url('https://image.flaticon.com/icons/svg/483/483345.svg');
  background-size: 17px 17px;
  height: 17px;
  width: 17px;
}

.dotmenu {
  width: 150px;
  border-radius: 10px;
  margin-top: 20px;
  display: inline-block;
  float: right;
  background: #fff;
  position: absolute;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
  z-index: 90;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  right: 0;
}

.dotmenu.dotopened {
  visibility: visible;
  opacity: 1;
}

.dotmenu::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 7px;
  width: 15px;
  height: 15px;
  background: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.dotmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dotmenu ul.dot-list {
  text-align: left;
  font-weight: 100;
  width: 100%;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.dotmenu ul.dot-list li a {
  text-decoration: none;
  padding-left: 20px;
  padding-top: 5px;
  color: #343434;
  font-weight: 600;
  display: block;
  line-height: 27px;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.dotmenu ul.dot-list li a:hover {
  color: tomato;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dotted">
  <div class="dottbtn"></div>
  <div class="dotmenu">
    <ul class="dot-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

Answer 2

在.dottbtn中添加右：15px，然后在.dotmenu中添加右：10px：

$('.dottbtn').on('click', function(e) {
            e.stopPropagation();
            $('.dotmenu').toggleClass('dotopened');
        });
        $(document).on('click', function() {
            $('.dotmenu').removeClass('dotopened');
        });

body {
            margin: 0;
            background: tomato;
            font-family: 'Open Sans', sans-serif;
        }
        
        .dotted {
            display: inline-block;
            vertical-align: top;
            float: right;
        }
        
        .dottbtn {
            cursor: pointer;
            margin-top: 5px;
            width: 40px;
            height: 20px;
            z-index: 80;
            position: relative;
            align-items: flex-end;
        }
        
        .dottbtn {
            background: url('https://image.flaticon.com/icons/svg/483/483345.svg');
            background-size: 17px 17px;
            height: 17px;
            width: 17px;
            right: 15px;
        }
        
        .dotmenu {
            width: 150px;
            border-radius: 10px;
            margin-top: 20px;
            display: inline-block;
            float: right;
            background: #fff;
            position: absolute;
            box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
            z-index: 90;
            visibility: hidden;
            opacity: 0;
            -webkit-transition: all 300ms ease;
            transition: all 300ms ease;
            right: 10px;
        }
        
        .dotmenu.dotopened {
            visibility: visible;
            opacity: 1;
        }
        
        .dotmenu::before {
            content: '';
            position: absolute;
            top: -5px;
            right: 7px;
            width: 15px;
            height: 15px;
            background: #fff;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        
        .dotmenu ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .dotmenu ul.dot-list {
            text-align: left;
            font-weight: 100;
            width: 100%;
            margin: auto;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        
        .dotmenu ul.dot-list li a {
            text-decoration: none;
            padding-left: 20px;
            padding-top: 5px;
            color: #343434;
            font-weight: 600;
            display: block;
            line-height: 27px;
            -webkit-transition: all 200ms ease;
            transition: all 200ms ease;
        }
        
        .dotmenu ul.dot-list li a:hover {
            color: tomato;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dotted">
<div class="dottbtn"></div>
<div class="dotmenu">
    <ul class="dot-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
</div>

选项菜单对齐不正确

2 个答案: