出现以下含图片等列表项列表项 [英] List items appearing below other list items containing images

问题描述

我想创建一个简单的导航，它由五个列表项。所有这些都是在宽度的20％。有两个项目包含文本，含有该站点标识为图像和然后将含有文本另两个列表项居中项。

我的问题是，当我在第三个项目的形象，在周围的列表项的文本被撞到了。我看不到任何利润或任何作用在他们或任何理由，这应该发生，无论我怎么努力，似乎并没有工作。

任何意见或解释是多少AP preciated：）

！

的jsfiddle

HTML

 ＆LT; D​​IV CLASS =导航＆GT;
    ＆LT; D​​IV CLASS =容器＆GT;
        ＆LT; UL＆GT;
            ＆LT;李＆GT;＆LT; A HREF =/＆GT;首页＆LT; / A＆GT;＆LT; /李＆GT;＆LT;！ - 
             - ＆GT;＆LT;李＆GT;＆LT; A HREF =/＆GT;分类＆LT; / A＆GT;＆LT; /李＆GT;＆LT;！ - 
             - ＆GT;＆LT;李＆GT;＆LT; IMG SRC =htt​​p://www.placehold.it/140x64＆GT;＆LT; /李＆GT;＆LT;！ - 
             - ＆GT;＆LT;李＆GT;＆LT; A HREF =/＆GT;联系与LT; / A＆GT;＆LT; /李＆GT;＆LT;！ - 
             - ＆GT;＆LT;李＆GT;＆LT; A HREF =/＆GT;个性化＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

CSS

 的.navigation {
    顶部：0;
    宽度：100％;
    高度：64PX;
    位置：固定;
    背景：#FFFFFF;
    下边框：1px的固体#dfdfdf;
}

的.navigation .container {
    宽度：1000px;
    保证金：0汽车;
    填充：0 10px的;
}

的.navigation UL {
    保证金：0;
    填充：0;
    列表样式类型：无;
}

的.navigation李{
    宽度：20％;
    高度：64PX;
    显示：inline-block的;
    文本对齐：中心;
    字体大小：16像素;
}
 

解决方案

添加或在的.navigation里替换这个CSS属性规则：

 显示：表细胞;
垂直对齐：中间;
 

示例

I'm trying to create a simple navigation that consists of five list items. All of which are 20% in width. There are two items containing text, a centered item containing the site logo as an image and then another two list items containing text.

My issue is that when I have an image in the third item, the text in the surrounding list items gets bumped down. I can't see any margins or anything acting upon them or any reason why this should be happening and no matter what I try, it doesn't seem to work.

Any ideas or an explanation would be much appreciated :)!

JSFiddle

HTML

<div class="navigation">
    <div class="container">
        <ul>
            <li><a href="/">Home</a></li><!--
            --><li><a href="/">Categories</a></li><!--
            --><li><img src="http://www.placehold.it/140x64"></li><!--
            --><li><a href="/">Contact</a></li><!--
            --><li><a href="/">Personalise</a></li>
        </ul>
    </div>
</div>

CSS

.navigation {
    top: 0;
    width: 100%;
    height: 64px;
    position: fixed;
    background: #ffffff;
    border-bottom: 1px solid #dfdfdf;
}

.navigation .container {
    width: 1000px;
    margin: 0 auto;
    padding: 0 10px;
}

.navigation ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.navigation li {
    width: 20%;
    height: 64px;
    display: inline-block;
    text-align: center;
    font-size: 16px;
}

解决方案

Add or replace this CSS properties in your .navigation li rules :

display: table-cell;
vertical-align: middle;

Example

这篇关于出现以下含图片等列表项列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！