如何对齐绝对div [英] How to align an absolute div

问题描述

我有以下代码：

body {margin：10px; } .menu {border：纯黑; border-width：1px 1px 0px 1px;背景颜色：黑色;白颜色;宽度：300px;位置：相对; padding：12px;}。menu：hover {background-color：white; color：black;}。dropdown {position：absolute;背景颜色：白色;宽度：200px; left：-1px;边框：纯黑色; border-width：0px 1px 1px 1px;颜色：黑色; top：100％;}。dropdown ul {list-style：none;填充：10px; margin：0;} zoom {zoom：200％;}

< div class =menu zoom>点击我< div class =dropdown> < UL> < li>第1项< / li> < li>第2项< / li> < li>第3项< / li> < / UL> < / div>< / div>

换行符（在左边）。我怎样才能解决这个问题？在某些缩放级别上它没有显示出来，但在我的默认缩放上，它在我的网站上非常清晰。我在一些浏览器上测试了它，并且它们都有这个问题。

解决方案

  #somelement {
 position：absolute; 
剩下：0; 
 right：0; 
保证金：汽车
} 
  

I have the following code:

body{
  margin: 10px;
}
  .menu {
  border: solid black;
  border-width: 1px 1px 0px 1px;
  background-color: black;
  color: white;
  width: 300px;
  position: relative;
  padding: 12px;
}

.menu:hover{
  background-color: white;
  color: black;
}
.dropdown {
  position: absolute;
  background-color: white;
  width: 200px;
  left: -1px;
  border: solid black;
  border-width: 0px 1px 1px 1px;
  color:black;
  top:100%;
}
.dropdown ul {
  list-style: none;
  padding: 10px;
  margin: 0;
}
.zoom {
  zoom: 200%;
}

<div class="menu zoom">
  Click me
  <div class="dropdown">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

There is a line break(on the left). How can I fix this? On some zoomlevels it is not showing up, but on my default zoom it is very clear on my website. I tested it on serveral webbrowsers and all of them have this problem.

解决方案

#somelement {
position: absolute;
left: 0;
right: 0;
margin: auto
}

这篇关于如何对齐绝对div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！