2017-10-28 192 views
1

試圖對齊文本與浮動一個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>

+0

你怎麼想它aligne d ..? – blackandorangecat

+0

@blackandorangecat那麼屏幕isbigger然後400px我希望日期有數字相同的選項卡。而當它小於400時,我希望它全部以中心爲中心,此刻它的偏離中心。 – nathan

+0

首先,由於您已在「p span」元素上定義了「100px」的寬度,因此事物並未出現在較小的設備上。改用'padding'或'margin'。 關於另一個問題,您需要提供更多信息。 –

回答

0

我要去使用和更新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>

+0

我試圖添加「標籤」,所以數字對齊和相同的日子和時間 – nathan

+0

@ nathan使用填充右跨跨度....有時它也是很好的休息,回來以後新鮮;) –

+0

是啊我知道,我只是不想放棄哈哈。當我使用'padding-right:100px;'沒有別的東西時,它只是移動它的權利,但沒有對齊數字。 – nathan