Question

我正在尝试向左移动一个p标记，向右移动另一个p标记。他们与父母共享同一个div。我无法做到这一点。右侧文本水平放置，但垂直放置在左侧文本下方。这是代码：

<div>
    <p id="t1">Text1</p>
    <p id="t2">Text2</p>
</div>

div {
    border: 1px solid red;
}
#t1 {
    border: 1px solid green;
    display: inline;
}
#t2 {
    border: 1px solid blue;
    display: inline;
    float: right;
}

这是我得到的结果：http://jsfiddle.net/JJB2s/现在，如果我尝试将t1文本浮动到左边，它们都处于相同的垂直水平，但它们似乎比它们应该低得多。我不太清楚为什么会发生这种情况以及如何解决它，有人可以向我解释一下吗？提前谢谢！

Answer 1

我会使用浮动实现这个。现在你没有浮动它们，并且正在尝试使用内联显示来使它们排成一行。这是一个更新的小提琴，解决了这个问题：

http://jsfiddle.net/JJB2s/13/

CSS转载如下：

div {
    border: 1px solid red;
    overflow: hidden;
}

#t1 {
    border: 1px solid green;
    float: left;
}

#t2 {
    border: 1px solid blue;
    float: right;
}

请注意，将overflow: hidden放在容器上会使其不会崩溃，因为它包含浮点数。如果您实际上不希望隐藏溢出，则可以使用clearfix实现相同的效果

Answer 2

添加margin-top：0px;在右边

像这样

#t2 {
border: 1px solid blue;
display: inline;
margin-top:0px;
float: right;
}

Answer 3

这样做是因为有两段。默认情况下，HTML会在新行中显示每个段落..是的，通过设置margin-top来更改此值：0px;

Answer 4

将边距和填充设置为0; http://jsfiddle.net/JJB2s/15/

div, #t1, #t2{
margin:0px;
padding:0px;
}
div {
    border: 1px solid red;
}
#t1 {
    border: 1px solid green;
    display: inline;
    float:left;
}
#t2 {
    border: 1px solid blue;
    display: inline;
    float: right;
}

Answer 5

我喜欢Jeff Escalante的回答（我也赞成了），但这是另一种具有相同效果的解决方案。这只是为了展示另一种方法..用他的答案。

这是Working Fiddle

div {
    border: 1px solid red;
}
div:after
{
    content: '';
    clear: both;
    display: block;
}
#t1 {
    border: 1px solid green;
    float: left;
}
#t2 {
    border: 1px solid blue;
    float: right;
}

将一个文本向左，另一个向右浮动

5 个答案: