Question

                 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>

我有一些元素/标签＆amp;我想以上述方式排列/对齐它们并使用上面的代码，但是如下所示对齐它：

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

我怎样才能达到理想的效果？

Answer 1

<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/

Answer 2

根据您的描述，您只是在寻找text-align: right;：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

参见代码：

＆＃13;

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;
  }

＆＃13;

<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>

＆＃13;

Answer 4

检查小提琴：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;
}

我想用css对齐一些句子

4 个答案: