我有以下代码:
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上测试了它,所有这些都有这个问题。
答案 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
}