-1

我对这里的推拉门技术有疑问。由于推拉门技术，描述之后的标题向右浮动，但我想要的只是在产品上方的中心独立存在。

你能帮我理解怎么做吗？

这是我用于标题的 CSS：

h3.offer-title, h3#comments, h3#reply-title  {
background:url(images/offer-title-bg.png) no-repeat right bottom;
color:#434343;
display:block;
float:left;
font-size: 14px;
margin-right: 6px;
padding-right:6px;
text-decoration:none;
height: 43px;
line-height: 0;
position: relative; }

h3.offer-title span, h3#comments span, h3#reply-title span {
background:url(images/offer-title-bg.png) no-repeat;
display:block;
padding-left: 20px;
height: 43px;
line-height: 43px;
padding-right: 16px;
}

谢谢你。

4

1 回答 1

0

它是浮动的，因为您float: left在第一个 CSS 代码块中进行了设置。要摆脱这种行为，您需要摆脱浮动。

浮动消失后，如果您希望标题的背景像以前一样很好地适合文本，则元素需要具有display: inline-block.

但是display: inline-block在标题上没有设置宽度（您可以添加一个宽度，但是如果您想更改文本或字体大小，它可能会中断），它没有居中。为了让它居中，你需要一个围绕它的包装元素，它有text-align: center.

所以：

  1. 添加此块：

    h3.offer-title {
    display: inline-block; /* this makes the bg fit the text */
    float: none; /* this overrides float:left */
}

  2. offer-title将元素包装在另一个 div 中。

  3. 样式包装器

     .offer-title-wrapper {
    text-align: center;
}
于 2012-10-26T17:54:55.677 回答