使用CSS的兩個標籤之間的間距

我在我的移動網站的頁腳中有兩個標籤。有時所選產品的稱號，是大，如下圖所示它非常接近的價格：使用CSS的兩個標籤之間的間距

enter image description here

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

我該如何改進？把它包起來！

來源

2014-10-30 john doe

在你的CSS，你爲什麼用#stickyFooter – chanchal 2014-10-30 15:55:34

也就是說它的CSS將被應用到該元素的ID。 – 2014-10-30 15:56:22

此行爲是因爲您的總寬度爲100%和margin-right爲20px。它溢出。

來源

2014-10-30 15:50:39

你能用一個例子提供一個可能的解決方案嗎？ – 2014-10-30 15:52:15

是啊！我不知道你在說什麼.. – 2014-10-30 15:53:23

你可以測試[這裏]（http://jsfiddle.net/ggyznryz/1/）。 – 2014-10-30 15:53:50

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

來源

2014-10-30 15:56:29 Luciano

如果我沒有把保證金放在上面，價格會被切斷。 – 2014-10-30 16:00:04

回合如何將它們疊放在移動視彼此的頂部？

CSS：

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


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

來源

2014-10-30 15:57:29

這裏是一個的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; 
}

來源

2014-10-30 16:02:01 Pianoc

嗨Shanna，我認爲鏈接到JSFiddle丟失。 – 2014-10-30 16:03:48

謝謝！我做了編輯。 – Pianoc 2014-10-30 16:16:54

的錯誤是，你使用的保證金，而不是填充。只要使用邊界框（它是框架的標準），填充就會在容器內部吃東西而不是添加它。所有你需要改變的是：

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

如果你沒有網站，here is a good article about it上邊界框。框架通常使用這樣的規則：

* { 
    box-sizing: border-box; 
}

來源

2014-10-30 19:12:31 austinthedeveloper

使用CSS的兩個標籤之間的間距

回答

相關問題