我想使用CSS

    this is my alignment : 
      this is my alignment one : 
     this is my alignment one two : 
    this is my alignment one two three : 

style="position:absolute;top:63px;left:151px;width:88px;margin-left:-132px;margin-top:5px" 

<span id="resultModel.hdPk1Label" name="resultModel.hdPk1Label" class="singleFormLabel" style="position:absolute;top:36px;left:151px;width:88px;margin-left:-132px;margin-top:5px"><font class="essential_mark">*</font>label.hdPk1 &nbsp;:&nbsp;</span>

對準一些句子我有一些元件/標籤&我想安排/在上述方式將它們對準並且使用上述代碼，但其對準，如下所示：我想使用CSS

this is my alignment : 
this is my alignment one : 
this is my alignment one two : 
this is my alignment one two three :

我怎樣才能達到我想要的效果？

來源

2015-09-04 SOP

'text-align：right'？ – Siguza

您可能希望包含要安排的所述「元素/標籤」的HTML，否則可能會使我們難以理解您的困難。 – Serlite

請給我們一個你的標記的例子。即。 jsfiddle.net並告訴我們您的限制。是否允許在短語的周圍添加元素？ –

從你的描述，你只是在尋找text-align: right;：

span 
 
{ 
 
    display: inline-block; 
 
    white-space: pre; 
 
    text-align: right; 
 
}

<span> 
 
    this is my alignment : 
 
    this is my alignment one : 
 
    this is my alignment one two : 
 
    this is my alignment one two three : 
 
</span>

來源

2015-09-04 13:50:24 Siguza

<div class="right">this is my alignment :<br/> 
    this is my alignment one :<br/> 
this is my alignment one two :</div>

CSS

.right 
{ 
    text-align:right; 
}

小提琴

https://jsfiddle.net/oa7tbcgj/

來源

2015-09-04 13:50:08 Jesse

'
'，而不是'
'。 – Siguza

你是對的，改變了 – Jesse

style =「position：absolute; top：97px; left：170px; width：48px; margin-left：-132px; text-align：right; margin-top：5px」縮進 – SOP

見代碼：

div { 
 
    position:absolute; 
 
    /* top:63px; adding your top margin of 5px from this value gives you a new property of... */ 
 
    top:68px 
 
    
 
    /* left:151px; subtracting your negative left margin of 132px from this value gives you a new property of... */ 
 
    left: 19px; 
 
    
 
    /* width:88px; 88px is not wide enough for standard font size to make lines at this length */ 
 
    width:250px; 
 
    
 
    text-align:right; /* aligns text to the right instead of to the left */ 
 
    
 
    /* Don't use margins on positioned elements unless you're trying to 'hack' something to be centered relative to some percentage position (ex left:50%; margin-left:-(half of this block's explicit width)). When you use positioning and margins you can no longer look at a single property declaration (ie "margin-top" or "left") to determine the positioning of your element. That makes maintaining your code more difficult and planning your layout around your positioned element more complicated. */ 
 
    /* margin-left:-132px; */ 
 
    /* margin-top:5px; */ 
 
} 
 

 
p { 
 
    /* paragraph tags, by default, have a top and bottom margin of 1em. We need to overwrite this default to get your lines to stack like you want them to */ 
 
    margin:0; 
 
    }

<div> 
 
    <p>this is my alignment :</p> 
 
    <p>this is my alignment one :</p> 
 
    <p>this is my alignment one two :</p> 
 
    <p>this is my alignment one two three :</p> 
 
</div>

來源

2015-09-04 13:56:17

檢查小提琴：https://jsfiddle.net/esc0se6x/

HTML

<div class="right"> 
    <span id="resultModel.hdPk1Label" name="label1" class="singleFormLabel">label.hdPk1 &nbsp;:&nbsp;</span> 
    <span id="resultModel.hdPk1Label" name="label2" class="singleFormLabel">loremloremdPk1 &nbsbsp;dPk1 &nbsp;:&nbsp;</span> 
    <span id="resultModel.hdPk1Label" name="label3" class="singleFormLabel">label.loremdPk1 &nbsbsp;:&nbsp;hdPk1 &nbsp;:&nbsp;</span> 
</div>

CSS

.right { 
    text-align:right; 
} 

.right > span { 
    display:block; 
}

來源

2015-09-04 14:23:28

回答

相關問題