如何对齐绝对div

时间:2017-04-07 12:46:50

标签: html css border line-breaks

我有以下代码:

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>

有一个换行符(左侧)。我怎样才能解决这个问题?在某些缩放级别上它没有显示,但在我的默认缩放上,它在我的网站上非常清晰。我在几个webbrowsers上测试了它,所有这些都有这个问题。

2 个答案:

答案 0 :(得分:0)

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>

答案 1 :(得分:0)

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