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;
}

如何使用CSS形状排列文本

1 个答案: