Question

嘿所以我有一个包含3个链接的div，它们有一个背景网址图像，使它们显示为图像

这是我的css课程

    /* calculate button */
.fc-calculate {text-align: center; padding: 12px 0; display: }

.fc-calculate-button {margin: 0 auto; width:200px;}

.fc-calculate-button a {line-height: 21px; height: 21px; background: url(../../images/SOURCE/btn_grn_r.gif) 100% 0 no-repeat; width: auto; display: block; float: left; padding-right: 30px;}
.fc-calculate-button a span {display: block; float: left; background: url(../../images/SOURCE/btn_grn_l.gif) 0 0 no-repeat; line-height: 21px; height: 21px; padding-left: 12px; color: #fff;}

并标记如下

    <div class="fc-calculate">
    <div class="fc-calculate-button">
      <sc:link field="Link One" cssClass="">
        <span class="btnspan">
          <sc:text select="." field="Link One Text" />
        </span>
      </sc:link>
    </div>
    <!-- /fc-calculate-button -->


    <div class="fc-calculate-button">
      <sc:link field="Link Two" cssClass="">
        <span class="btnspan">
          <sc:text select="." field="Link Two Text" />
        </span>
      </sc:link>
    </div>
    <!-- /fc-calculate-button -->
</div>

问题在于，而不是出现在彼此旁边并且居中的链接出现在彼此之下

Answer 1

div本身就是显示：块。尝试添加：

.fc-calculate {margin: 0 auto; text-align: center; padding: 12px 0;}
.fc-calculate-button {display:inline; margin: 0 auto; width:200px;}

Answer 2

如果你想并排显示两个容器并将它们放在容器上，你可以漂浮你的锚和你的跨度而不是你的.fc-calculate-button类，试试这个：

<强> CSS

.fc-calculate {
    text-align:center;
}

.fc-calculate-button {
    display:inline-block;
    *display:inline; /* ie7 fix */
    zoom:1; /* hasLayout ie7 trigger */
}

CSS Text-Align Center非工作项目彼此出现

2 个答案: