并排对齐<div>元素
并排对齐<div>元素
提问于 2011-02-09 05:32:14
我知道这是一个相当简单的问题，但我无论如何也想不出来。我有两个链接，我已经在其中应用了背景图像。下面是它目前的样子(很抱歉出现了阴影，只是一个按钮的草图)：
但是，我希望这两个按钮是并排的。我真的不知道对齐需要做些什么。
这是的
<div id="dB"}>
<a href="http://notareallink.com" title="Download" id="buyButton">Download</a>
</div>
<div id="gB">
<a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a>
</div>这里是CSS
#buyButton {
background: url("assets/buy.png") 0 0 no-repeat;
display:block;
height:80px;
width:232px;
text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}
#galleryButton {
background: url("images/galleryButton.png") 0 0 no-repeat;
display:block;
height:80px;
width:230px;
text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}回答 4
Stack Overflow用户
回答已采纳
发布于 2011-02-09 05:41:17
将float:left;应用于这两个div应该会使它们并排出现。
Stack Overflow用户
发布于 2011-02-09 10:29:13
小心float: left…
…有许多方法可以并排对齐元素。
下面是实现两个元素并行…的最常见方法
演示：View/edit all the below examples on Codepen
…下面所有示例的基本样式
以下示例中的parent和child元素的一些基本css样式：
.parent {
background: mediumpurple;
padding: 1rem;
}
.child {
border: 1px solid indigo;
padding: 1rem;
}
使用float解决方案可能会对其他元素产生意外影响。(提示:您可能需要使用clearfix。)
html
<div class='parent'>
<div class='child float-left-child'>A</div>
<div class='child float-left-child'>B</div>
</div>css
.float-left-child {
float: left;
}
html
<div class='parent'>
<div class='child inline-block-child'>A</div>
<div class='child inline-block-child'>B</div>
</div>css
.inline-block-child {
display: inline-block;
}注意:这两个子元素之间的空格可以通过删除标记之间的空格来删除：
html
<div class='parent'>
<div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>css
.inline-block-child {
display: inline-block;
}
html
<div class='parent flex-parent'>
<div class='child flex-child'>A</div>
<div class='child flex-child'>B</div>
</div>css
.flex-parent {
display: flex;
}
.flex-child {
flex: 1;
}
html
<div class='parent inline-flex-parent'>
<div class='child'>A</div>
<div class='child'>B</div>
</div>css
.inline-flex-parent {
display: inline-flex;
}
html
<div class='parent grid-parent'>
<div class='child'>A</div>
<div class='child'>B</div>
</div>css
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr
}Stack Overflow用户
发布于 2017-02-22 05:22:56
保持简单
<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4938716
复制相关文章
相似问题