Question

我有一个小的信息div，想要对齐信息内容的右侧，即065 31 323 323，qadenza@gmail.com和qadenza323应保持对齐。我尝试了不同数量的空格和不间断的空间 - 没有成功。

<div id="divInfo">
<div>Mobile - 065 31 323 323</div>
<div>Gmail - qadenza@gmail.com</div>
<div>Skype - qadenza323</div>
</div>

#divInfo{
    display:inline-block;
    margin-left:29vw;
    border:thin solid red;
}
#divInfo div{
    padding:2px 5px;
    border-radius:7px;
    cursor:pointer;
}
#divInfo div:hover{
    background:#e1e1e1;
}

小提琴是here

Answer 1

如果其他内容也需要与左侧对齐，请使用表格。您也可以使用tr:hover更改背景。 http://jsfiddle.net/VLjRK/5/

要将信息与右侧和左侧的名称对齐，您必须在右侧添加内联HTML元素，例如span和float。我在这里更新了你的jsFiddle - http://jsfiddle.net/VLjRK/3/

Answer 2

我检查了你的代码。以下是一些更改请检查 -

添加要对齐的范围标记

<div id="divInfo">
<div><span>- Mobile</span> 065 31 323 323</div>
<div><span> - Gmail</span>qadenza@gmail.com</div>
<div><span> - Skype</span>qadenza323</div>
</div>

添加一个css类make float：right;

#divInfo span{
    float:right;
}

如何对齐div内容的部分？

2 个答案: