CSS span定位问题答案

【问题标题】：CSS span Positioning issueCSS span定位问题
【发布时间】：2013-12-29 23:02:30
【问题描述】：

CSS 中的定位跨度

我正在创建一个示例 Rails 站点，但我在 index.html.erb 上遇到问题：这是我的 HTML 代码块（这是一个示例网站，因此名称和内容是由组成的，即 FleetFile 不是真实服务的名称）：

</center>
<span class="socialnet">

Aol
Google+<br>
MySpace<br>
Orkut<br>
Twitter<br>
Facebook<br>
</span>
</aside>
<span class="servsmadebyus">
Free Web Hosting<br>
Cloud Storage<br>
Paid Web Hosting<br>
FleetFile Free FTP Client<br>
FleetFile Premium<br>
</span>

还有我的 CSS：

.socialnet {
text-align: left;
color: #000000;
background-color: red; }

.servsmadebyus {
text-align: right;
color: red;
background-color:blue;
}

如您所见，我想将我的 .servsmadebyus 跨度定位在右侧，但该跨度仍在左侧。即使我放了 text-align:right;，它仍然在左侧

【问题讨论】：

请从您的 HTML 标记中删除“”标签。这太老式了（199X）。您还在 CSS 代码中混合了十六进制颜色表示法和命名颜色，为了保持理智，最好使用一种表示法。
中心标签是如何到达那里的？一定是从我意外保存的另一个 HTML 文件中放置的。我也使用了十六进制代码，因为我想要更浅/更深的阴影，所以我不得不使用 HTML 十六进制颜色值，我使用了命名颜色代码，因为常规阴影很好，但感谢反馈，我很感激。跨度>

标签： html css ruby-on-rails css-position

【解决方案1】：

text-align 应该应用于父（块）元素，而不是跨度本身。您很可能需要将这些跨度包装在 block 元素中，然后将它们包装在 float 中。

类似于以下代码：

html:

<div class="social">
    <span class="socialnet">
    Aol
    Google+<br>
    MySpace<br>
    Orkut<br>
    Twitter<br>
    Facebook<br>
    </span>
</div>
<div class="serv">
    <span class="servsmadebyus">
    Free Web Hosting<br>
    Cloud Storage<br>
    Paid Web Hosting<br>
    FleetFile Free FTP Client<br>
    FleetFile Premium<br>
    </span>
</div>

css:

.socialnet {
color: #000000;
background-color: red; }

.servsmadebyus {
color: red;
background-color:blue;
}

.social{
    float: left;
}

.serv{
    float: right;
}

/* below is the clearfix hack, read more here: http://css-tricks.com/snippets/css/clear-fix/ */
#wrap:before,
#wrap:after {
    content: " ";
    display: table;
}

#wrap:after {
    clear: both;
}

演示：http://jsfiddle.net/KfDK2/

【讨论】：

感谢您的修复。帮了大忙！
@user3144705 如果这回答了您的问题，您应该将其标记为已回答。