Question

如果将<span> <div>应用于float:right，如何将<span>文字对齐span { float: right; }。

这是我的代码：

＆＃13;

<div>Lorem ipsum dolor sit amet,
  <br>consectetuer adipiscing elit,
  <br> sed diam nonummy nibh dolore
  <span>Align me</span>
</div>

＆＃13;

vertical-align:text-top

＆＃13;

我试过了StringType，但它不起作用。我无法使用负边距，甚至无法对HTML进行任何更改。

Answer 1

您可以使用position: absolute：

将其对齐到右上角

＆＃13;

 p {
  position: relative;
 }

span {
  position: absolute;
  top: 0;
  right: 0;
}

＆＃13;

<p>Lorem ipsum dolor sit amet, <br>consectetuer adipiscing elit,<br> sed diam nonummy nibh dolore <span>Align me</span></p>

＆＃13;

Answer 2

请see这个并告诉我。

span {
  float: right;
  position: relative;
  bottom:40px;
}

Answer 3

您可以使用Flexbox并设置p { display: flex; align-items: flex-start; justify-content: space-between; }。

<p>Lorem ipsum dolor sit amet, <br>consectetuer adipiscing elit,<br> sed diam nonummy nibh dolore <span>Align me</span></p>

ps -Af | grep "jenkins" | grep -v grep | awk '{print$2}' | xargs kill -9

Answer 4

here is the example，因为您无法修改HTML，因此您可以进行css更改例如：

    span#mySpan {
    background-color:yellow;
    vertical-align:middle;
}

Answer 5

我认为位置：绝对现在最好。
喜欢，
position:absolute; right:0; top:0;}刚试试

Answer 6

翻译：

span {
  float: right;
  transform:translateY(-200%)
}

CSS网格：

p {
  display: grid;
}

span {
  float: right;
  grid-column-start:2;
  text-align: right;
}

Answer 7

希望这可以帮助您解决问题：

<div>Lorem ipsum dolor sit amet,
  <br>consectetuer adipiscing elit,
  <br> sed diam nonummy nibh dolore
  <span>Align me</span>
</div>


div {  
   border: 1px solid gray;
   position: relative; 
   display: flex;
    }

span {
  display: inline-block;     
}

CSS：div顶部的垂直对齐文本

7 个答案:

翻译：

CSS网格：