0

我有一个小的信息 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;
}

小提琴在这里

4

2 回答 2

1

我已经检查了你的代码。这里有一些变化，请检查 -

添加要右对齐的 span 标签

<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;
}
于 2013-08-20T18:41:08.870 回答
1

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

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

于 2013-08-20T18:34:36.207 回答