Question

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;，它仍然留在左侧

Answer 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/

CSS跨度定位问题

CSS中的位置范围

1 个答案: