Question

我有this代码：

<div class="footer_bar_row_desc_richedi">
    <a class="myText" href="#">My Text</a>
    <div class="myDiv">
        &nbsp
    </div>   
</div>

.myText
{
    text-transform:uppercase;
    font-weight:bold;    
    color:#b90e1d;
    text-decoration:none;    
    float:left; 
    font-size:12px;
    padding-top: 1px;
    text-align:right;
}

.myDiv
{
    float:right; 
    width:25px; 
    padding-right:5px; 
    text-align:right; 
    margin-bottom:3px; 
    background:red;
}

我想把文字放在红色div右边，靠近（左边）的链接上。似乎属性text-align:right;不起作用。有什么想法吗？

Answer 1

试试这个：

<div class="footer_bar_row_desc_richedi">
    <div class="myDiv">
        &nbsp
    </div>   
    <a class="myText" href="#">My Text</a>
</div>

.myText
{
    text-transform:uppercase;
    font-weight:bold;    
    color:#b90e1d;
    text-decoration:none;    
    float:right; 
    font-size:12px;
    padding-top: 1px;
    /*text-align:right;*/
}

.myDiv
{
    float:right; 
    width:25px; 
    padding-right:5px; 
    text-align:right; 
    margin-bottom:3px; 
    background:red;
}

Answer 2

你需要给你的.mytext div一个宽度。它正在折叠到文本的确切宽度，这意味着正确对齐文本看起来就像什么都不做......

见

http://jsfiddle.net/hS3JA/

Answer 3

text-align: right只会将文本在其自己的元素内对齐。由于a是内联元素，因此它不会占用超出其需要的宽度，并且text-align将变得无用。

尝试将display: inline-block放入.myText { }并为其指定宽度。

Answer 4

默认情况下，A标签具有内联显示样式（适合容器与内容大小）。你必须设置display：block;所以属性width，height，text-align将影响对象

Answer 5

我遇到了同样的问题。我通过将其封装在段落标记中来解决它...

<p style="text-align:right;">...link...</p>

为什么这个链接没有得到text-align：对吗？

5 个答案: