Question

我得到一个奇怪的边距右边的空间而没有定义任何边距权利。

我事先使用*{margin:0;padding:0;}使用css重置，因此没有理由在所有ul部分之间保留该边距。

HTML：

<div class="footer-links">

        <ul>
            <li><h3>Title A</h3></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>

        <ul>
            <li><h3>Title B</h3></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>

        <ul>
            <li><h3>Title C</h3></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>

        <ul>
            <li><h3>Title D</h3></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>

    </div>

CSS：

.footer-links {
    border: 1px solid #ddd;
    width: 992px;
    margin: 0 auto;
    padding: 20px 0;
    color: #222;
}
.footer-links a {    
    color: #565656;
}
.footer-links ul {
    border: 1px solid #ccc;
    display: inline-block;
    min-width: 250px;
    text-align: left;
}
.footer-links h3 {
    padding-bottom: 2px;
} 

.footer-links li {
    padding-bottom: 3px;
}

jsFiddle：

http://jsfiddle.net/VrMVU/1/

Answer 1

它们之间有空格。如新的那样。

尝试</ul><ul>

Answer 2

希望这有帮助！ js fiddle。错误的是空间。

       <ul>
        <li><h3>Title A</h3></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul><ul>
        <li><h3>Title B</h3></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul><ul>
    .....

不受欢迎的边缘空间来自无处

2 个答案: