如何使float列表居中排列
来源:互联网 发布:天天电玩城源码 编辑:程序博客网 时间:2024/06/03 22:44
原文: http://www.search-this.com/2007/09/19/when-is-a-float-not-a-float/
Question: "When is a float not a float?"
Answer: "When it doesn't float to the left or right."
Today's modern web designs are utilizing CSS for page layout. One popular CSS property used for page layout is float. The float property causes an element to float against the left or right margin of its parent element. But an often-sited drawback of using floats is that there is no easy way to center them. Most people settle by using a fixed width wrapper that contains the float (or floats). The width of the wrapper must match the float(s) total width and then the wrapper can simply be centered using auto margins. This will effectively center the floated elements as they are now contained within the wrapper. The drawback of this method is that you will need to know the width of the floated content beforehand.
In this article we will describe how you can center a widthless float or a series of widthless floats with relative ease.
Floated Buttons
A common task for a designer is setting up a horizontal navigation menu. There are a number of ways that horizontal menus can be constructed and all have their advantages and disadvantages depending on the situation in hand. The easiest solution is simply to use a list for the menu and set the list element to display:inline so that the menu lines up horizontally across the page.
If the menu is purely text then you can have the menu centered simply by setting the ul to text-align:center causing the inline list elements to be nicely centered on your page. This is fine for simple menus, but if you want the text styled as buttons with padding, shading and various borders, then inline elements are not ideal for this type of styling and the results can be unstable across browsers.
In cases where the menu items have complicated styles applied to them the best option is float the list element instead. This means that the anchor can also be made display:block (or floated also) and this enables the elements to be styled consistently with padding borders and heights if necessary.
First we will need some code to work with -- here is some that I prepared earlier:
- html,body{
- margin:0;
- padding:30px 10px;
- text-align:center;
- }
- #outer{
- width:780px;
- margin:auto;
- text-align:left;
- border:1px solid #000;
- padding:5px;
- }
- .navwrap ul{
- list-style:none;
- margin:0;
- padding:0;
- }
- .navwrap li{
- border:1px solid #eff2df;
- float:left;
- margin:0 10px 0 0;
- background:#809900;
- }
- .navwrap li a{
- float:left;
- border:1px solid #4c7300;
- position:relative;
- left:-2px;
- top:-2px;
- background:#eff2df;
- color:#4c7300;
- text-decoration:none;
- padding:6px 10px;
- font-weight:bold;
- }
- .navwrap li a:hover{
- background:#809900;
- color:#fff;
- }
- .clearer{
- height:1px;
- overflow:hidden;
- margin-top:-1px;
- clear:both;
- }
- <div id="outer">
- <div class="navwrap">
- <ul>
- <li><a href="#">Button 1</a></li>
- <li><a href="#">Button 2's a bit longer</a></li>
- <li><a href="#">This is Button 3</a></li>
- </ul>
- </div>
- <div class="clearer"></div>
- </div>
(Note: The extra div used for .navwrap isn't necessary for this example, but I have included it to make the examples which follow easier to understand. The above example could have been done without using the extra div by applying the styling directly to the ul instead.)
The drawback of floating the list element is that the menu now aligns to the left of the page (or right depending on the value used), as can be seen in Figure 1 which is produced by running the above code:
Figure 1
Now in order to center the floated menu you would typically wrap the menu in another static div and apply a fixed width as well as set margins to auto. But this presents a small problem in that in the above example the menu items have no widths defined and therefore the total width of our menu is unknown. We could of course set widths for each menu item but it would then be necessary to add classes to each individual menu item, which is a bit of a pain to do and will also restrict the menu to always being that same size. If we wanted different (or dynamic) menu items on various pages then we would have to keep changing the classes for every instance which would quickly become unmanageable or even impossible for dynamic data.
Therefore it would be best if there was a way to center the menu that didn't involve setting any specific widths anywhere!
It's All Relative
Once again we find ourselves calling on our old friend -- Relative Positioning.
The premise is simple -- it basically just involves a widthless float that is placed 50% from the left using position:relative. The nested inner element is then reversed and a negative relative position of 50% (-50%) is applied. This has the effect of placing the element in the center. Recall that relative positioning maintains the flow of the document and allows other content to flow underneath quite normally.
The basic section of (stripped down) code is as follows:
- .navwrap{
- float:left;
- position:relative;
- left:50%;
- }
- .navwrap ul{
- position:relative;
- left:-50%;
- }
Unfortunately IE needs a helping hand and requires the inner element to be floated as well. This can be achieved by including an IE-only style using conditional comments.
- <!--[if IE ]>-->
- .navwrap ul{float:left;}
- <![endif]-->
If you look at Figure 2 you will see the effect that this has had on our layout.
Figure 2
The menu is now centered nicely, but what I haven't shown is that the browser now shows a horizontal scrollbar (in some browsers). The reason for this is that the relative positioning moved the element outside the confines of the window and although we subsequently dragged it back into view the browser still thinks it is off-screen somewhere.
To combat this effect we can simply add overflow:hidden on a parent div which will kill the horizontal scrollbar. You can use any parent, but you may be better advised to specifically add an extra element to do this rather than utilising the page wrapper (as in my example) as you may not want to hide the overflow on that.
The full CSS and HTML can be found in this live example.
Here is a screenshot of the above link showing various sized menus:
Figure 3
Drawbacks
The drawbacks to this method are mainly the extra non-semantic div wrapper that is needed to accomplish this effect and also the overflow:hidden that is needed on a parent element. Otherwise the method works well across modern browsers although, as I always say, make sure you check in the browsers you want to support before using any advanced methods like this.
Other solutions
There is in fact another way of centering elements like this and that involves using display:table for Opera and Mozilla browsers and using display:inline-block for IE. This new method has one small advantage over the floated method in that in a fluid width environment the menu can wrap and the wrapping item also becomes centered. This is unlike the float version above where a wrapping element would align to the left of the centered menu.
However, you will have to wait until part 2 of the article to see how this can be done, but meanwhile you can have fun with your floats.
- 如何使float列表居中排列
- float:left的对象如何居中
- float-left的对象如何居中
- 前端面试题 - 如何居中一个float:left的元素
- 让几个横向排列的浮动(float:left)的div居中显示。
- html float居中
- float元素居中
- 给float元素居中
- Float 水平居中浮动
- 如何使DIV 居中
- 如何使TITLE居中
- 如何使DIV居中
- jquery 动态生成html5列表项以及header,footer的固定,居中排列
- 简单DIV居中排列
- ul li 居中排列
- 如果用float实现居中
- float 元素的水平居中
- 横向列表-使用float
- 奔三的我怎么办
- 螺旋霓虹灯
- JAVA中的static调用非static方法的几点注意
- GNU GLOBAL ソースコードタグシステム
- matlab中随机函数的具体使用方法
- 如何使float列表居中排列
- 软件构架实践:对一些质量属性使用的战术
- NHibernate Reference Documentation - NHibernate 参考文档
- Contest Problem Types(信息学竞赛的题目类型)
- DispatchAction和MappingDispatchAction的用法及区别
- 虚拟化技术打造绿色数据中心 管理成本可减少40%
- 容易忽视的一些细节
- android Toast控件使用
- java2D 图形设备