Question

div+css中如何让两个元素位于同一水平线

<div class="home-page">
<a class="left"></a>
<span>
<asp:Label ID="about" runat="server" Text="<%$ Resources:Resource, about %>"
CssClass="title"></asp:Label>
</span>
<a class="right" href="about.aspx">
</a>
</div>
div中有三个元素：两个图片，一个文本，图片用的<a></a>标签，文本的span
但<a class="right" href="about.aspx">与其他的两个标签不在同一水平上，它自动换了行（看图）
.home-page
{
border-bottom-color: #dfdfdf;
border-bottom-style: solid;
border-bottom-width: 1px;
width:100%;
float:left;
height:20px;
padding-bottom:0px;
}
.home-page span
{
display: block;
font-size: 15px;
font-weight: bold;
padding-left: 0px;
color:#22436C;
}
.home-page a
{
display:block;
}
.home-page .left
{
float:left;
background:transparent url('Image/square_arrow.gif');
background-repeat: no-repeat;
width:25px;
height:40px;
}
.home-page .right
{
background: transparent url('Image/icon_more.gif');
background-repeat: no-repeat;
float: right;
width: 40px;
height: 10px;
}

Answer 1

例如将两个按钮对齐，方法和详细的操作步骤如下：

1、第一步，打开html编辑器并创建一个新的html文件，见下图，转到下面的步骤。

2、第二步，执行完上面的操作之后，输入CSS代码“button {display: inline-block}”，见下图，转到下面的步骤。    

3、第三步，执行完上面的操作之后，浏览器运行“index.html”页面，两个元素位于同一水平线上了，见下图。这样，就解决了这个问题了。

Answer 2

是display: block;在作怪，我在这里细说一下block与inline两个元素：
block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素)；
Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素)；
#box{ display:block; //可以为内嵌元素模拟为块元素 ；
display:inline; //实现同一行排列的效果。

Answer 3

.home-page .right
设置成float:left;

Answer 4

div内部有两个元素，你可以设置ul，和li，可以上百度搜索这两个元素，你会有惊奇的发现。