如何僅使用內聯樣式去除跨度元素之間的空間？

我想用兩種顏色（紅色和藍色）顯示一個單詞「WorldWide」。如何僅使用內聯樣式去除跨度元素之間的空間？

我試過使用span元素如下。

<span style="color:red">World</span><span style="color:blue">Wide</span>

但問題是，電子郵件客戶端等等的文本格式的HTML如下結束，顯示了兩個詞（世界寬，而不是字寬）由於在html添加的新線路。

<span style="color:red">World 
</span> 
<span style="color:blue">Wide 
</span>

所以我的問題是：如何考慮HTML客戶端格式/添加新行以跨度元素顯示一個單詞的兩種顏色？請注意，電子郵件客戶端只允許使用內聯樣式，因此我不能使用<style></style>標籤。

2017-07-07 Books

另外，你可以使用這個已經是全球先生的紅藍色圖片http://www.iaam.com/artimages/music/Pitbull-rapper.jpg –

是的，我想我會去那個！：D – Books

您可以float第一個元素。

<span style="color:red; float: left;">World</span> 
 
<span style="color:blue">Wide</span>

2017-07-07 15:45:42

如果超過2個單詞/跨度，這似乎不起作用。世界範圍只是一個例子。我沒有意識到解決方案可能只適用於「兩個」跨度而不是3個或更多。 – Books

@Books如果你有3個單詞，則將前兩個單詞浮起。或者如果你有42個單詞，將第41個浮動。或者只是把它們全部浮起來，這也沒關係。 –

@Books是你爲什麼取消這個解決方案？根據你的文章，我的解決方案解決了這個問題。爲什麼你不選擇它作爲一種解決方案，因爲你需要一個不同於你在帖子中提供的解決方案？您有責任在帖子中重現問題，並解決該問題。如果您的實際問題與您發佈的內容不同，我們該如何知道？ –

浮動屬性指定了一個框（的元素）是否應該浮動。您可以在span標記中添加float。爲您的代碼，您只需要float:left與第一個span標籤。

因此，這將是

<span style="color:#FF0000; float: left">World</span> 
 
<span style="color:#0D0DFF;">Wide</span>

2017-07-07 15:51:41

我知道浮不工作那麼好與電子郵件。我知道跨度是內聯塊，但添加內聯代碼可能會使其工作。

<span style="color:red;display:inline-block;">World</span> 
 
<span style="color:blue;display:inline-block;">Wide</span> and the rest of the words

讓我知道這是否正常工作。

2017-07-09 23:42:02 Syfer

回答