如何在导航菜单按钮中组织3个元素？

我有一个垂直导航菜单，其中每个按钮包含最多3个元素。如何在导航菜单按钮中组织3个元素？

第一个是描述字形图标，第二是文本和第三是一个任选所示的图标，指示这是在当前选择中。

这里是什么li元素有：

<a href="index.php"> 
    <i class="menu-icon fa fa-home"></i> 
    <span class="navlink"> 
    home page 
    </span> 
    <div id="curpg-container"> 
    <i class="fa"></i> 
    </div> 
</a>

我想才达到两件事情：

作出的第一个图标占用按钮的整体高度（垂直它allign到中心）（原因是文字很大，它会在图标下方折叠）
制作第三个图标，垂直对齐中心，并且水平对齐按钮的右边。

（图像1具有正确的外观，图像2是错误）
normal
search

This是菜单是怎么了。

来源

2014-07-17 Chris

@ gla3dr嗯奏效罚款回形针，但改变字形的中心垂直对齐：/尝试添加'垂直对齐：中间; '但没有运气。 – Chris

最理想的方法是使用伪元素 - :before和:after - 以避免不必要的标记混淆HTML代码。

下面是如何在背景图像放置的帮助下完成此操作的示例：http://jsfiddle.net/7E7ph/。

HTML：

<ul> 
    <li><a href = "#">Home</a></li> 
    <li><a href = "#">Log out</a></li> 
</ul>

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    padding: 20px; 
} 

ul { 
    list-style-type: none; 
    display: table; 
    border: 1px solid #ccc; 
} 

ul > li + li { 
    border-top: 1px dotted #ccc; 
} 

ul > li > a { 
    display: block; 
    padding: 10px 24px; 
    font: normal 14px/1 Sans-Serif; 
    color: #2e2e2e; 
    text-decoration: none; 
    position: relative 
} 

ul > li > a:before { 
    content: ""; 
    position: absolute; 
    width: 16px; 
    height: 16px; 
    top: 50%; 
    margin-top: -8px; 
    left: 4px; 
    background: url(http://placehold.it/16x16) no-repeat; 
} 

ul > li:last-child > a:after { 
    content: ""; 
    position: absolute; 
    width: 12px; 
    height: 12px; 
    top: 50%; 
    margin-top: -6px; 
    right: 6px; 
    border-radius: 100%; 
    background: url(http://placehold.it/12x12) no-repeat; 
}

来源

2014-07-17 22:20:57 DRD

我不确定...但也许{word-break：break-all;}可以帮助你。此外，只需使用span元素（自然内联）即可围绕“内联”。试试这个：

CSS：

.current-page-container { 
    overflow: hidden; 
    position: relative; 
    left: 7em; 
    top: -1.2em; 
    height: .94em; 
    width: 5rem; 
} 

.icon{ 
    width:10%; 
    background-color:#123456; 
} 
.text{ 
    width:90%; 
    word-break:break-all; 
}

HTML：

<li><a href="#"> 
         <i>Icon2</i> 
         <span class="navlink">Home</span> 
         <div class="current-page-container"> 
          <span class="icon"><i>o</i></span> 
          <span class="text">Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet</span> 
         </div> 
         </a> 
        </li>

告诉我，如果这是你想要的。 :)

来源

2014-07-17 20:59:02

如何在导航菜单按钮中组织3个元素？

回答

相关问题