使用CSS在两个标签之间的间距

Question

我的移动网站页脚中有两个标签。有时，所选产品的标题很大，而且价格非常接近，如下所示：

HTML：

<div style="margin:5px;">

            <span class="stickyProductctName">This is a really really really rea</span>
            <div class="stickyPrice">$1142.00</div>
        </div>

这两个元素的样式如下所示：

#stickyFooter .stickyProductctName {
text-transform: uppercase;
width: 85%;
}


#stickyFooter .stickyPrice {
font-weight: bold;
width: 15%;
float: right;
margin-right: 20px;
}

我该如何改进？包裹它！

Answer 1

此行为是因为您的元素总宽度为100%且margin-right为20px。它溢满了。

Answer 2

• 将margin-right放在.stickyProductctName;
上
• 将display:inline-block;添加到.stickyPrice

Answer 3

bout如何将它们叠加在一起用于移动视图？

CSS：

#stickyFooter .stickyProductctName {
    text-transform: uppercase;
    display: block;
    text-align: center;
}


#stickyFooter .stickyPrice {
    font-weight: bold;
    text-align: center;
}

Answer 4

这是一个JSFiddle。 http://jsfiddle.net/shannabarnard/Ls75o3cr/

首先，你需要将两个元素放在一个范围内，它在语义上不能很好地使用一个作为跨度而另一个作为div包含在另一个div中。

更改宽度，并给出左右填充的价格。

HTML：

<div style="margin:5px;">
    <span class="stickyProductctName">This is a really re ally reall yreally  really re ally really re reall y really really rereally really really re rea</span>
    <span class="stickyPrice">$1142.00</span>
</div>

CSS：

.stickyProductctName {
text-transform: uppercase;
float: left;
display:inline;
width:85%;
}

.stickyPrice {
font-weight: bold;
width: 10%;
float: right;
margin: 0 10px;
}

Answer 5

错误在于您使用了边距而不是填充。只要使用border-box（它是框架的标准），padding就会占用容器内部而不是添加容器。您需要改变的是：

#stickyFooter .stickyPrice {
  font-weight: bold;
  width: 15%;
  float: right;
  padding-right: 20px;
}

如果您在网站上没有边框，here is a good article about it。框架通常使用如下规则：

* {
  box-sizing: border-box;
}