Workign与浮动< li>页脚中的元素 [英] Workign with floating <li> elements in footer

问题描述

我的网站现在在本地服务器上，但这将是一个简单的解决方案，那些谁知道什么是所谓的。

My website is on the local server right now however this will be a simple fix for those of you who know whats it's called.

我想得到这些列表（以白色为界）浮动在页脚的可用空间的最左边（黑色边框）。

I'm trying to get these lists (bordered in white) to float the the far left in the available space of the footer(bordered by black).

>

这是我的CSS

#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px;/*border: 1px solid #0C0;*/}
#footer a { text-decoration: underline; color: #c7bd89; }
#footer a:hover { text-decoration: none; color: #fff; }

#footer h6 { background: url(img/FOOTER-HR-BG.jpg) left center repeat-x; text-align: left;}
#footer h6 span { background: #8e2023; display: inline-block; padding-right: 5px; }


.footer-widgets { width: 960px; height: 503px; margin: 0px auto; padding: 0px; border: 1px solid #000;}
.footer-widgets li { width:280px; height: auto; list-style-image: none; list-style-position: outside; list-style-type: none; float: left; color: #fff; padding: 13px; margin-right: 10px; /*border: 1px solid #fff;*/ }
.footer-widgets li ul {color: red;}
.footer-widgets li ul li {color: #fff; margin-left: -50px; margin-top: -15px;}
.footer-widgets li p { font-size: 1em; line-height: 18px; text-align: left; /*border: 1px solid red;*/  }
.footer-widgets li h2 { font-size: 1.4em; font-weight: normal; letter-spacing: 1px; line-height: 30px; text-align: left;}
.footer-archives { position: relative; top: -210px;}
.footer-widgets li.last { position: relative; top: -210px;}

h6 { font-family:Verdana, Geneva, sans-serif; font-size: 1.2em; font-weight: normal; letter-spacing: 1px; margin-top: 15px; margin-bottom: 10px; color: #fff;}

.footer-copyright { position: absolute; width: 900px; left: 50%; margin-left: -450px; top: 400px; height: 100px; font-family: Tahoma, Geneva, sans-serif; line-height: 22px; font-size: 1em; color: #fff; text-align: center; text-transform: uppercase; }
.footer-copyright a { color: #fff !important; text-decoration: none !important; }
.footer-copyright a:hover { color: #c7bd89; text-decoration: underline !important; }

.copyright { margin-top: 27px; text-transform: uppercase; display: block; color: #cc9798;}
.copyright a { color: #cc9798 !important; text-decoration: underline; }

.footer-one, .footer-two, .footer-three, .footer-four { border: 1px solid #fff; float: left;}

我有包含页脚，在900px x 503px容器内，我希望所有列出float left（如果它足够小，则在下面）。所以档案将流在关注我们下，如果我把一个搜索栏下客户评价它会适合。

I have the containing footer and within the 900px x 503px container I wish that all lists float left (and under each other if it's small enough). So "Archives" would flow under "Follow Us" and if I were to put a search bar under "Testimonials" it would fit.

我可以用CSS做什么来实现这一点？

What can I do with my CSS to have this happen?

推荐答案

p>为什么不是只为每一边（左，中，右）创建一个列，并以这种方式模拟，至少我认为这是你想要实现的

Why no just create a column for each side (left, center, right) and simulate it that way, well atleast I think this is what you are trying to achieve

小提示 http://jsfiddle.net/eEwdk/

这是另一个解决方法，将使每个li元素绝对定位和计算它的位置（是的，我知道这是多余的）

Theres another workaround that would consist in making each li element absolute positioned and calculating it's position (yeah I know it's sound redundant)

这篇关于Workign与浮动< li>页脚中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！