Macji Pro²⁰¹⁰

我们都知道float:left和float:right，但是否想过float:center呢？居中浮动。。。

<div id="macji">
    <ul class="macji-skin">
        <li>列表一</li>
        <li>列表二</li>

        <li>列表三</li>
    </ul>
</div>

我们希望实现li是浮动的，并且居中的（li个数不固定，ul宽度未知）。可以设置ul的text-align:center,再设置li的display，可以实现居中，但这样不是我们的初衷，我们需要实现float:center。

这里我们得先重温一下position:relative，它将依据left，right，top，bottom等属性在正常文档流中偏移位置。那我们可以让ul为position:relative;left:50%，然后再让li像左浮动，在让它position:relative;right:50%（或者left:-50%），那么li就像向中间浮动一样居中了。废话不多说，先试试。

#macji{
    position:relative;
    width:100%;
    height:80px;
    background-color:#eee;
    text-align:center;
    overflow:hidden;
}
#macji .macji-skin{
    float:left;
    position:relative;
    left:50%;
}
#macji .macji-skin li{
    position:relative;
    right:50%;
    float:left;
    margin:10px;
    padding:0 10px;
    border:solid 1px #000;
    line-height:60px;
}

猛击这里，查看演示»

扩展阅读

• http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

在我上一篇文章，我指出“所有语义的元素都不应作为布局来使用”，引来很多反对声音。这里我想解释一下我认为的语义和非语义元素（只是个人观点哦）。

非语义元素，布局元素

我认为的作为布局只有div，span，因为他们只有属性display。一个表示块（断行的），一个表示内联的（不断行的），并无其他实际意义。所以他们只能用来布局，我们可以理解为水泥板和砖头。

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

语义元素，非布局元素

• 标题元素，H系列
  

  There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

  
  对于H系列，要注意的是他们的级别，比如H1最高级，一个页面只能出现一次，我的解释是一山不容二虎。
• P元素
  

  The P element represents a paragraph. It cannot contain block-level elements (including P itself).
  We discourage authors from using empty P elements. User agents should ignore empty P elements.

  
  它呈现的是一个段落，我们怎么能用一个段落来布局呢？更何况它还不能包含一个块级元素，包括P本身。
• 列表系列，UL，OL，LI
  

  Ordered and unordered lists are rendered in an identical manner except that visual user agents number ordered list items. User agents may present those numbers in a variety of ways. Unordered list items are not numbered.

  
  很多人会认为做导航的时候，是否是布局呢？导航不是结构，导航只是在呈现一个列表。另外在国内，UL大家已经在滥用了。
• 着重元素，EM，STRONG
  

  EM and STRONG are used to indicate emphasis.
  The presentation of phrase elements depends on the user agent. Generally, visual user agents present EM text in italics and STRONG text in bold font. Speech synthesizer user agents may change the synthesis parameters, such as volume, pitch and rate accordingly.

  
  EM表示重点，STRONG表示更加重视。这里值得注意的是，STRONG并不是用来加粗的，加粗可以用b，但表现元素（无任何语义元素）已经开始淘汰了。现在表现已经交给CSS了。

以上是常见的一些元素（当然还有很多元素，这里就不一一列出了），我们拿出来比较就会发现，语义元素和非语义元素的差别。最后我还是想强调，所有语义的元素都不应作为布局来使用。（如果你不同意我的观点，你当然坚持自己的，挖哈哈~~）。

迷惑，是否应该把结构和内容分清楚？这在于多余标签和精炼标签。光光字面意思，多余和精炼。你会选谁呢。但我不觉得多余代码有什么不好。我们常见到多余代码，例如：

<div class=“list”>
    <ul>
        <li>清单一</li>
        <li>清单一</li>

        <li>清单一</li>
    </ul>
</div>

<div class="footer">
    <p>这里是我的版权，一个开始走火的人的版权</p>

</div>

大家都会说外层的div可以省略，然后把它的class给子容器（ul，p）。我并不这么认为，外层的div是结构，而ul或者p是呈现语义，也就是展现一个列表或者一个段落，列表或者段落总不能用来布局吧？这好比一间房子，我们把结构去掉，直接用墙纸，窗帘来做结构，那这房子还有谁敢住哦。

以后有一些小需求，比如list那里增加一个“更多”链接，按照“精炼”就要改动结构或者就增加一个li放“更多”，但这样合适么。。。

我们的页面不仅仅要用户看上去内容清晰，我们内在的结构也要清晰。所以我更倾向把结构分清楚，然后再填写内容。