javascript - CSS 帮助 - 移动网站的页脚

Question

我目前正在开发一个移动网站，我可以在它的页脚上使用一些帮助。

这是其外观的图像：

http://i.stack.imgur.com/alH8M.jpg

它应该具有以下内容：

1）宽度需要在不同的移动设备上工作，所以不能固定

2) home 左边和 newsletter 右边的边距应该相等

3) 如果设备宽度不足以使页脚显示在一行中，则链接应显示在多“行”中。我想说的是，不应该有水平滚动

我已经摆弄了很长时间，但无法让它工作。下面是一些入门的基本代码：

<nav>
    <ul>
        <li><a href="">Unternehmen</a></li>
        <li><a href="">Kompetenz</a></li>
        <li><a href="">Produkte</a></li>
        <li><a href="">Partner</a></li>
        <li><a href="">News</a></li>
    </ul>
</nav>

提前感谢任何可以帮助我的人！

score 3 · Accepted Answer

nav { background: #016d9b; }
nav ul { text-align: center; padding: 0; }
nav ul li { display: inline-block; border-right: 1px solid white; padding: 0 10px; margin: 10px 0; }
nav ul li:last-child { border-right: none }
nav ul li a { color: white; text-decoration: none; }

ul文本与中心对齐并li显示为内联块。

我认为这应该处理。

score 0 · Accepted Answer

0

nav{width:100%; display:block;}
nav ul{padding:0px; margin:0px;}
nav ul li{ width:20%; float:left;}

于 2012-05-17T12:34:03.363 回答

score 0 · Accepted Answer

试试这个

nav ul { list-style-type:none; margin:0; padding:0; }
nav ul li { float:left; padding-left:10px; margin-right:10px; border-left:1px solid #fff; }
nav ul li:first-child { margin-right:0 !important; }
nav ul li a { color:#fff; }

score 0 · Accepted Answer

我不确定这会对你有帮助....

但我做了一些工作。您可以调整它将以多行显示的窗口大小。

这里jsfiddle：http: //jsfiddle.net/thilakar/XM2qU/1/

score 0 · Accepted Answer

对于您当前的 HTML 结构，您可以设置一些 CSS 来实现提供的图像的副本：

请参阅此工作小提琴示例！

HTML

<nav>
    <ul>
        <li><a href="#" title="">Unternehmen</a></li>
        <li><a href="#" title="">Kompetenz</a></li>
        <li><a href="#" title="">Produkte</a></li>
        <li><a href="#" title="">Partner</a></li>
        <li><a href="#" title="">News</a></li>
    </ul>
</nav>

CSS

body {
    margin: 0;
    padding: 0;
}
nav {
    width: 100%;
    background-color: blue;
    text-align: center;
}
ul {
    list-style-type: none;
    padding: 12px 0;
    width: auto;
    margin: 0 auto;
    display: block;
}
li {
    display: inline-block;
    margin: 0;
    padding: 0;
}
a {
    color: #FFF;
    border-left: 1px solid #FFF;
    text-decoration: none;
    font-family: sans-serif;
    padding: 0 8px;
    font-size: 12px;
    line-height: 17px;
}
li:first-child a {
    border-left: 0 none;
}
a:hover {
    text-decoration: underline;
}

预览：

在此处输入图像描述