Question

我目前正在移动网站上工作，我可以使用它的页脚帮助。

以下是它应该如何看的图像：

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

应该有以下内容：

1）宽度需要在不同的移动设备上工作，因此无法修复

2）家庭左侧和通讯右侧的边距应相等

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>

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

Answer 1

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显示为内联块。

我认为这应该处理。

Answer 2

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

Answer 3

试试这个

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; }

Answer 4

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

但我做了一些工作。您可以调整窗口大小，它将显示在多个“行”中。

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

Answer 5

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

查看此工作Fiddle Example!

<强> 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;
}

预览

一些相关链接可以帮助您了解建议内容：

CSS display Property

CSS Lists

CSS Padding

CSS Tutorial, Learning CSS

CSS帮助 - 移动网站的页脚

5 个答案:

一些相关链接可以帮助您了解建议内容：