Question

我有这个：http://jsfiddle.net/40y622e6/1/

<div class="footer_middle">
    <div class="clear"></div>
    <div id="footer_middle">
        <div>
            <ul>
                <li class="desc">BEZAHLARTEN</li>
                <li class="vorkasse">Vorkasse</li>
                <li class="paypal">Paypal</li>
                <li class="rechnung">Rechnung</li>
            </ul>
        </div>
        <div>
            <ul>
                <li class="desc">WIR VERSENDEN MIT</li>
                <li class="dhl">DHL</li>
            </ul>
        </div>
    </div>
</div>

.footer_middle {background-color: #e9ebed; height:80px;text-align: center;}
#footer_middle ul li {display: inline;margin-right:20px;color: #5c5f6f;font-size: 13px;font-weight: 200;}
.vorkasse, .rechnung, .paypal, .dhl {font-size: 11px !important;color: #848484 !important; padding-top:40px;}
#footer_middle div {display: inline-block;margin-top: 30px;}
#footer_wrapper .footer_inner #footer {background: none;}
.vorkasse {background: url('https://adium.im/images/services/icon-msn.png') no-repeat center top;}
.rechnung {background: url('https://adium.im/images/services/icon-msn.png') no-repeat center top;}
.paypal {background: url('https://adium.im/images/services/icon-msn.png') no-repeat center top;}
.dhl {background: url('https://adium.im/images/services/icon-msn.png') no-repeat center top;}

并且正在尝试获得此结果：

html css images in navigation
我试图在li元素中添加一个高度并删除填充但元素不会向下移动有人知道如何解决我的这个问题吗？

Answer 1

对CSS进行以下更改：

#footer_middle ul li - 将display: inline;更改为display: inline-block;。添加vertical-align: middle;。这将确保遵守li上的填充并垂直对齐它们。
#footer_middle div - 删除margin-top: 30px;。由于li更改，不再需要此功能。

<强> CSS：

.footer_middle {background-color: #e9ebed; height:80px;text-align: center;}
#footer_middle ul li {display: inline-block;vertical-align: middle;margin-right:20px;color: #5c5f6f;font-size: 13px;font-weight: 200;}
.vorkasse, .rechnung, .paypal, .dhl {font-size: 11px !important;color: #848484 !important; padding-top:40px;}
#footer_middle div {display: inline-block;}
#footer_wrapper .footer_inner #footer {background: none;}
.vorkasse {background: url('http://www.taxi-blau.de/images/stories/icon_ec_a.png') no-repeat center top;}
.rechnung {background: url('http://www.taxi-blau.de/images/stories/icon_ec_a.png') no-repeat center top;}
.paypal {background: url('http://www.taxi-blau.de/images/stories/icon_ec_a.png') no-repeat center top;}
.dhl {background: url('http://www.taxi-blau.de/images/stories/icon_ec_a.png') no-repeat center top;}

JS小提琴： http://jsfiddle.net/hk036jzc/1/

Answer 2

我在Chrome控制台上看到403错误......

GET http://www.taxi-blau.de/images/stories/icon_ec_a.png 403（禁止）

我尝试用另一张图片替换你的背景（例如http://google.com/images/srpr/logo11w.png）并且它有效....它似乎是一个权限问题

Answer 3

获取http://www.taxi-blau.de/images/stories/icon_ec_a.png 403（禁止）首先检查background-image属性。

Answer 4

我认为你应该选择桌面设计，因为页脚看起来像一排。此外，您可以轻松使用 vertical-align ， height 和其他样式进行轻松自定义。最重要的是：它需要最少的代码！

在你的情况下，可以这样做：

<table>
    <tr>
        <td>BEZAHLARTEN</td>
        <td>
            <img src="http://i.stack.imgur.com/95dh3.png">
            <br/>Vorkasse
        </td>
        <td>
            <img src="http://i.stack.imgur.com/95dh3.png">
            <br/>Paypal
        </td>
        <td>
            <img src="http://i.stack.imgur.com/95dh3.png">
            <br/>Rechnung
        </td>
    </tr>
</table>

我想你想要这样的东西：

http://jsfiddle.net/61hp2p5y/

导航ul li与图像

4 个答案: