Question

我试图在同一条线上有两个对齐的p标签，但与通常的不同，我想要左边的右对齐p标签和右边的左对齐p标签。出于某种原因，它只会显示其中一个。希望能帮助你更好地理解我在下面展示。

[text:] space here  [text]
[text:] space here  [text]
[text:] space here  [text]


[text:] - Should be right justified
[text] - Should be left justified

我把它们作为两个单独的列，但我想把它们都放在手风琴类型的下拉效果中，所以我需要它们。

以下是我的尝试：

HTML：

<div class="header">
    <p>location:</p>
    <p>1 View Street #3 Worcester, MA 01610</p>

    <p class="break">mobile:</p>
    <p class="break"><a href="tel://860.681.8260">860.681.8260</a></p>

    <p>email:</p>
    <p><a href="mailto:marques.crosby@gmail.com">marques.crosby@gmail.com</a></p>   
</div>

CSS：

.header {
display: block;
margin-bottom: 50px;}

.header p {
float: left;
clear: both;
text-align: right;
margin: 0;
color: #333333;
font: italic .9em 'Open Sans', sans-serif;}

.header p:nth-of-type(2n) {
float: right;
clear: none;
text-align: left;
color: #333333;
font: .9em 'Open Sans', sans-serif;
padding-right: 462px;}

谢谢， Marques的

Answer 1

你没有给出任何html或css（关于Stack Overflow的问题不是很好的做法），但是如果我根据你的描述收集你想要的东西，那么下面的代码思想都可以。< / p>

浮动示例

See Example in Action

示例HTML

<p>Left text, Right align 1</p>
<p>Right text, Left align 1</p>
<p>Left text, Right align 2</p>
<p>Right text, Left align 2</p>
<p>Left text, Right align 3</p>
<p>Right text, Left align 3</p>
<p>Left text, Right align 4</p>
<p>Right text, Left align 4</p>

<强> CSS

p {
    float: left;
    clear: both;
    text-align: right;
}
p:nth-of-type(2n) {
    float: right;
    clear: none;
    text-align: left;
}

内联块示例

See Example in Action

与上面相同的HTML，此CSS ：

p {
    display: inline-block;
    text-align: right;
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px 0 0;
    margin: 0;
}
p:nth-of-type(2n) {
    text-align: left;
    margin-left: -4px;
    padding: 0 0 0 10px;
}

margin-left: -4px（以及其他可能的解决方案）see this article。

的原因

同一线上的左右对齐

1 个答案:

浮动示例

内联块示例