如何右对齐 anchor 和内容 DIV?
(示例中的 div 是具有蓝色和红色边框的 Anchor 和 Window)
div.tabs {
background-color: #a0a0a0;
position: relative;
width: 400px;
}
div.tabs ul.tabs {
list-style: none;
margin: 0;
padding: 0;
}
div.tabs ul.tabs li {
display: inline-block;
padding: 8px;
}
div.tabs div.content {
background-color: #e8e8e8;
padding: 8px;
}
div.tabs div.toolbar {
background-color: #e8e8e8;
position: absolute;
right: 12px;
top: 0;
}
div.popup {
position: relative;
}
div.popup div.anchor {
border: 1px solid blue;
}
div.popup div.window {
border: 1px solid red;
position: absolute;
z-index: 2000;
width: 160px;
}
p {margin: 0;}
<div class="tabs">
<ul class="tabs">
<li class="tab">Tab 1</li>
<li class="tab">Tab 2</li>
</ul>
<div class="content">
Content
</div>
<div class="toolbar">
<div class="popup">
<div class="anchor">
<a>Anchor</a>
</div>
<div class="window">
<p>Line 1</p>
<p>Line 2</p>
</div>
</div>
</div>
</div>
最佳答案
我假设您想将它们移到选项卡表的右侧。所以我就这样做了:
在 CSS 中,使用以下内容:
div.tabs {
background-color: #a0a0a0;
position: relative;
width: 400px;
}
div.tabs ul.tabs {
list-style: none;
margin: 0;
padding: 0;
}
div.tabs ul.tabs li {
display: inline-block;
padding: 8px;
}
div.tabs div.content {
background-color: #e8e8e8;
padding: 8px;
}
div.tabs div.toolbar {
background-color: #e8e8e8;
position: absolute;
right: 0px;
top: 0;
}
div.popup {
position: relative;
}
div.popup div.anchor {
border: 1px solid blue;
position: relative;
}
div.popup div.window {
border: 1px solid red;
position: absolute;
z-index: 2000;
width: 160px;
height: 34px;
right: 0px;
top: 165%;
}
p {margin: 0;}
编辑:最终版本。祝你好运!
关于html - 右对齐具有一个绝对位置的两个 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53889709/