用CSS如何對齊文本形狀

Question

的頁面是在這裏：

http://www.satearn.com/node/163

我想要的文字與CSS形狀完美排隊，就好像它們是子彈。

.big_bullets { 
    display: inline-block; 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    position: relative; 
    cursor: pointer; 
    top: 0; 
    padding: 0 19px; 
    border: 3px solid rgb(255,255,255); 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
    font: normal normal bold 20px/50px Arial, Helvetica, sans-serif; 
    color: rgb(255, 255, 255); 
    text-align: center; 
    text-transform: uppercase; 
    -o-text-overflow: clip; 
    text-overflow: clip; 
    background: #069; 
    float:left; 
} 

.big_bullets_para { 
    float:right; 
    clear: both; 
    margin-right:50%; 
} 

的HTML看起來像這樣：

<div class="big_bullets"> 
    A</div> 

<div class="big_bullets_para"> 
    <p> 
     Please use the site's shopping cart and use Paypal or credit card options.</p> 
</div> 

<p>&nbsp;</p> 

<div class="big_bullets"> 
    A</div> 

<div class="big_bullets_para"> 
    <p> 
     Please use the site's shopping cart and use Paypal or credit card options.</p> 
</div> 

<p> 
    &nbsp;</p> 

<div class="big_bullets"> 
    A</div> 

<p> 
    &nbsp;</p> 

<div class="big_bullets_para"> 
    <p> 
     Please use the site's shopping cart and use Paypal or credit card options.</p> 
</div> 

Answer 1

HTML結構就變成

<div class="big_bullets_para"> 
    <div class="big_bullets">A</div> 
    <p>Please use the site's shopping cart and use Paypal or credit card options.</p> 
</div> 

JSFiddle demo here。

如果您想段落用子彈點上方排隊，使用

.big_bullets_para p { 
    margin: 0; 
}