Question

我正在使用CSS菜单，当我指向菜单第一行中的第三项时，项目将更大，然后第二行将变得混乱。我试图改变物品的边距和尺寸，但它并没有对我有用。另外，我试图改变菜单主体的填充和大小，但没有任何效果。

我希望有人可以提供帮助。提前谢谢你

这里是HTML代码和CSS

＆＃13;

#menu {
  padding: 0 10px;
}

.menu {
  padding: 3px 5px;
  margin: 0 5px;
  position: relative;
  display: inline-block;
  border: 2px solid black;
  border-radius: 10px;
  float: right;
  cursor: pointer;
}

.menu:hover {
  background: #f9e8b5;
}

.menu-content {
  position: absolute;
  right: 0px;
  width: 273px;
  z-index: 1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
  text-align: center;
  border: 1px solid black;
  border-radius: 10px;
  color: black;
  background: linear-gradient(to bottom, #d3bd7b 0%,#ead28a 50%);
  height: 0px;
  padding: 40px 5px 20px 5px;
  -webkit-transition: height 2s ease-out; /* For Safari 3.1 to 6.0 */
  transition: height 2s ease-out;
}

.menu-content:hover {
  height: auto;
  padding: 45px 5px 25px 5px;
  -webkit-transition: height 2s ease-out; /* For Safari 3.1 to 6.0 */
  transition: height 2s ease-out;
}

.menu .menu-content {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
  transition: opacity 1s;
}

.menu:hover .menu-content {
    display: block;
    visibility: visible;
    opacity: 1;
}

.menu-header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 283px;
  height: 40px;
  background: black;
  margin: 0px;
  padding: 0px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.menu-header p{
  color: #ead28a;
  font-weight: bold;
  font-size: 20px;
  margin: 8px;
}

.menu-footer {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 283px;
  height: 20px;
  background: black;
  margin: 0px;
  padding: 0px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.menu-footer p{
  color: #ead28a;
  margin: 4px;
}

.menu-item {
  visibility: hidden;
  list-style-type: none;
  height: 60px;
  width: 60px;
  margin: 15px;
  float: left;
  border-radius: 10px;
  -webkit-transition: width 2s, height 2s, margin 2s, visibility 2s, opacity 1s linear; /* For Safari 3.1 to 6.0 */
  transition: width 2s, height 2s, margin 2s, visibility 2s, opacity 1s linear;
}

.menu-content .menu-item{

}

.menu-content:hover .menu-item {
  visibility: visible;
  opacity: 1;

}

.menu-item:hover {
  height: 85px;
  width: 85px;
  margin: 0px;
  background: #f9e8b5;
  padding: 0px;
}

.menu-item a {
  height: 60px;
  width: 60px;
  display: block;
	text-decoration: none;
  border-radius: 10px;
  margin: 0px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background: linear-gradient(to bottom, #d3bd7b 0%,#ead28a 50%);
  transform: scale(1);
  -webkit-transition: width 2s, height 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s, height 2s;
}

.menu-item a:hover {
  height: 85px;
  width: 85px;
  display: block;
  margin: 0px;
  background: #f9e8b5;
  padding: 0px;
  transform: scale(1);
}

.menu-item a p {
  visibility: hidden;
  opacity: 0;
  margin: 0px;
  -webkit-transition:visibility 2s, opacity 1s linear; /* For Safari 3.1 to 6.0 */
  transition: visibility 2s, opacity 1s linear;
  -webkit-transition-delay: 0.5s; /* Safari */
  transition-delay: 0.5s;
}

.menu-item:hover.menu-item a p {
  font-size: 16px;
  visibility: visible;
  opacity: 1;
}

.menu-item a img {
  margin-top: 10px;
}

.menu-item:hover.menu-item a img {
  margin-top: 20px;
}

＆＃13;

<div id="menu">
  <div class="menu">
    <spin><img class="icon" src="#" /></spin>
    <div class="menu-content">
      <div class="menu-header">
        <p>User Menu</p>
      </div>
      <div class="menu-item">
        <a href="#"><img class="icon" src="#" /><p>Item 1</p></a>
      </div>
      <div class="menu-item">
        <a href="#"><img class="icon" src="#" /><p>Item 2</p></a>
      </div>
      <div class="menu-item">
        <a href="#"><img class="icon" src="#" /><p>Item 3</p></a>
      </div>
      <div class="menu-item">
        <a href="#"><img class="icon" src="#" /><p>Item 4</p></a>
      </div>
      <div class="menu-item">
        <a href="#"><img class="icon" src="#" /><p>Item 5</p></a>
      </div>
      <div class="menu-item">
        <a href="#"><img class="icon" src="#" /><p>Item 6</p></a>
      </div>
      <div class="menu-footer">
        <p><?php echo date("m-d-Y :: H:i:s");?></p>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

我不知道关于转换矩阵的规则来自哪里;在元素检查器中，它以“计算”样式显示，但我在实际CSS中看不到任何带有变换矩阵的规则。

那就是说，我运行了你的代码片段，我能找到解决问题的唯一方法就是添加

clear: left;

到你的第四个菜单项div（用餐一个）。您可以通过调用nth-child或为该元素提供自己的类名，在样式表中以通常的方式执行此操作。你也可以做内联风格，但一般我知道不推荐。

我确信有一种更好的方法可以解决这个问题，不会将此问题仅应用于您的一个菜单项div，但它可以正常工作。

制作项目菜单整齐的问题

1 个答案: