我知道这个问题是什么意思,比如我希望有人给我提供代码,因为我懒得搜索。好吧,不是。
我希望图片是内联的,因此文字不会隐藏在它后面,但我希望它是动态的 - 我想这样做,即使我没有6,图像仍保持有序我的列表中的元素,我希望图像始终存在。除此之外,图像几乎描述了我想要的东西。我现在得到的只有:
现在,我得到的是: 这不是我想要的。它没有响应,就像我的例子,你可能有5个项目(不同的大小是一个选项),但图像仍然居中。我怎样才能做到这一点?
编辑:我稍微更新了代码,现在蓝丝带条现在位于图像的中间位置。 有没有更好的方法,而不是定义px。?
我的代码已托管here!请查看。
提前致谢,NonameSL
答案 0 :(得分:1)
如果您想垂直对齐项目,也可以使用Flexbox。
笔:http://codepen.io/tomanagle/pen/zBgdAX
<nav>
<ul>
<li>List item 1</li>
<li>A quite longer list item</li>
<li>An extremely long list item makes the logo un-centered.</li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/English_Pok%C3%A9mon_logo.svg
"></li>
<li>Shorter</li>
<li>List</li>
<li>Items</li>
</ul>
</nav>
CSS:
nav > ul{
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
nav > ul > li{
float: left;
padding: 1rem 2rem;
width: 100%;
max-width: 12rem;
}
nav > ul > li > img{
max-width: 100%;
}
答案 1 :(得分:0)
在第26行的test2.html文件中进行以下更改我想到了这个文件:
div#menu ul li a {
background-color: #f8fad4;
border-color: #136866;
border-radius: 4px 4px 0 0;
border-style: solid;
color: #555533;
font-weight: bold;
text-decoration: none;
//new changes
white-space: nowrap;
width: 120px;
overflow: hidden;
display: inline-block;
}
答案 2 :(得分:0)
最终我想出了这个非常相似的代码。将其添加到div#menu ul li a
:
width:100px;
display: inline-block;
如果有一个奇数个列表项,只需向较小的一侧添加一个visibility: hidden;
空元素。