对齐文本右

试图对齐文本与浮动一个div右对齐文本右

试图在卡添加到我的信息，似乎与电话号码的工作，但如果我是浮动的权利它不行。

此外，当我的屏幕较小，然后400px信息文本似乎不是100％居中。

代码：

p span { 
 
    display: inline-block; 
 
    width: 100px; 
 
} 
 

 
.responsive { 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
.responsive .left { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
.responsive .right { 
 
    float: right; 
 
    text-align: right; 
 
    width: 50%; 
 
} 
 

 
@media (max-width: 400px) { 
 
    .responsive .left, 
 
    .responsive .right { 
 
    width: 100%; 
 
    text-align: center; 
 
    } 
 
}

<div class="responsive"> 
 
    <div class="left"> 
 
    <h2>Infomation:</h2> 
 
    <p> 
 
     <span>Phone: </span>(00) 00000000<br/> 
 
     <span>Fax:  </span>(00) 00000000<br/> 
 
     <span>Email: </span><a href="mailto:[email protected] ">[email protected]<br/></a> 
 
    </p> 
 
    </div> 
 

 
    <div class="right"> 
 
    <h2>Business Hours:</h2> 
 
    <p> 
 
     <span>Mon - Th:</span> 8:30 - 5:00<br/> <span>Friday:</span> 8:30 - 3:30<br/> 
 
    </p> 
 
    </div> 
 
</div>

来源

2017-10-28 nathan

你怎么想它aligne d ..？ – blackandorangecat

@blackandorangecat那么屏幕isbigger然后400px我希望日期有数字相同的选项卡。而当它小于400时，我希望它全部以中心为中心，此刻它的偏离中心。 – nathan

首先，由于您已在“p span”元素上定义了“100px”的宽度，因此事物并未出现在较小的设备上。改用'padding'或'margin'。关于另一个问题，您需要提供更多信息。 –

我要去使用和更新answer i gave earlier使用文本对齐：

.box, h1 { 
 
    text-align: center;/* update*/ 
 
    } 
 
    .box { 
 
    background:linear-gradient(to left, gray 50%, silver 50%) /* see center*/ 
 
} 
 
.left p {display:table; 
 
margin:auto; 
 
text-align:left; 
 
}.left p span { 
 
display:inline-block; 
 
padding-right:3em 
 
} 
 
.left p span:nth-child(3) {padding-right:4em;} 
 
.left p span:last-of-type {padding-right:1em} 
 

 
@media screen and (min-width:399px) { 
 
    .box { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    text-align: left;/* update*/ 
 
    } 
 
    .text-right { 
 
    text-align: right; 
 
    } 
 
}

<h1 style="font-size:3vw">Play me full page and resize window</h1> 
 
<div class="box"> 
 
    <div class="left"> 
 
    <h2>Infomation:</h2> 
 
    <p> 
 
     <span>Phone: </span>(00) 00000000<br/> 
 
     <span>Fax:  </span>(00) 00000000<br/> 
 
     <span>Email: </span><a href="mailto:[email protected] ">[email protected]<br/></a> 
 
    </p> 
 
    </div> 
 

 
    <div class="right text-right"> 
 
    <h2>Business Hours:</h2> 
 
    <p> 
 
     Monday - Thursday<br/> 8:30 - 5:00<br/> Friday <br/> 8:30 - 3:30<br/> 
 
    </p> 
 
    </div> 
 
</div>

来源

2017-10-29 00:09:08

我试图添加“标签”，所以数字对齐和相同的日子和时间 – nathan

@ nathan使用填充右跨跨度....有时它也是很好的休息，回来以后新鲜;） –

是啊我知道，我只是不想放弃哈哈。当我使用'padding-right：100px;'没有别的东西时，它只是移动它的权利，但没有对齐数字。 – nathan

回答

相关问题