如何对齐绝对DIV

Question

我有以下代码：

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>

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

Answer 1

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

 
.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>

Answer 2

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