在li内对齐图像和文本-多行，限制空间

Question

我正在尝试为宽度为200像素（是的...仅200像素）的移动设备创建菜单。 所以我在空间上有限制。

所以我要用ul和li创建菜单。 每个图标内部都有一个图标和说明文字。

问题是...我需要使图标与说明对齐。 但是，由于有足够大的空间（不是），文本只是分解，第二个单词位于相应图标的上方。

我不能使用表格...也不能把图标放在更大的div中以使描述模糊。 （我不确定传递给下一个人的描述和图标是否适合。）

所以...你能帮我吗？ 我在这里留下我的代码。 非常感谢！

片段

 #principal{ max-width:600px; width:200px; height:2000px; margin:0 auto; background-color:black; background-image:url(images/header_background.png); background-size:contain; background-repeat:no-repeat; background-position:center top; overflow:hidden; } #footer{ color:white; padding:0px 10px; } #menu3{ color:#c2c2c3; font-size:12px; text-transform:uppercase; list-style:none; display: inline-block; float:left; } #menu3 ul{ list-style-type: none; } #menu3 img{ vertical-align: middle; padding-right:8px; } div ul li span{ display: inline-block; vertical-align: middle; } #menu3 li a{ color:#c2c2c3; } #menu3 li a:hover, #menu3 li a:hover img{ opacity: 0.8; } 

 <div id="principal"> <div id="footer"> <ul id="menu3"> <li><a href="#"><img src="images/responsabilidade.png" /><span>responsabilidade social</span></a></li> <li><a href="#"><img src="images/horario.png" /> <span>horário</span></a></li> <li><a href="#"><img src="images/localizacao.png" /> <span>localização</span></a></li> <li><a href="#"><img src="images/contactos.png" /> <span>contactos</span></a></li> <li><a href="#"><img src="images/mapaSite.png" /> <span>mapa do site</span></a></li> <li><a href="#"><img src="images/creditos.png" /> <span>créditos</span></a></li> </ul> </div> </div> 

Answer 1

可能的解决方案：删除左侧的填充并使用white-space:nowrap; 强制图标和文本保持在同一行

 #principal{ max-width:600px; width:200px; height:2000px; margin:0 auto; background-color:black; background-image:url(images/header_background.png); background-size:contain; background-repeat:no-repeat; background-position:center top; overflow:hidden; } #footer{ color:white; padding:0px 10px; } #menu3{ color:#c2c2c3; font-size:12px; text-transform:uppercase; list-style:none; display: inline-block; float:left; padding-left: 0; /*remove padding*/ } #menu3 ul{ list-style-type: none; white-space:nowrap; } #menu3 img{ vertical-align: middle; padding-right:8px; } div ul li span{ display: inline-block; vertical-align: middle; } #menu3 li a{ color:#c2c2c3; } #menu3 li a:hover, #menu3 li a:hover img{ opacity: 0.8; } li{ white-space:nowrap; } 

 <div id="principal"> <div id="footer"> <ul id="menu3"> <li><a href="#"><img src="images/responsabilidade.png" /><span>responsabilidade social</span></a></li> <li><a href="#"><img src="images/horario.png" /> <span>horário</span></a></li> <li><a href="#"><img src="images/localizacao.png" /> <span>localização</span></a></li> <li><a href="#"><img src="images/contactos.png" /> <span>contactos</span></a></li> <li><a href="#"><img src="images/mapaSite.png" /> <span>mapa do site</span></a></li> <li><a href="#"><img src="images/creditos.png" /> <span>créditos</span></a></li> </ul> </div> </div> 

Answer 2

在这种情况下，我假设图像的高度和宽度为30像素。

 #principal { max-width: 600px; width: 200px; height: 2000px; margin: 0 auto; background-color: black; background-image: url(images/header_background.png); background-size: contain; background-repeat: no-repeat; background-position: center top; overflow: hidden; } #footer { color: white; padding: 0px 10px; } #menu3 { color: #c2c2c3; font-size: 12px; text-transform: uppercase; list-style: none; display: inline-block; float: left; list-style-type: none; padding: 0; } #menu3 img { vertical-align: middle; padding-right: 8px; width: 30px; height: 30px; } div ul li span { display: inline-block; vertical-align: middle; } #menu3 li { padding-left: 40px; position: relative; margin-top: 10px; min-height: 30px; } #menu3 li:first-child { margin-top: 0; } #menu3 li a img { position: absolute; left: 0; } #menu3 li a { color: #c2c2c3; } #menu3 li a:hover, #menu3 li a:hover img { opacity: 0.8; } 

 <div id="principal"> <div id="footer"> <ul id="menu3"> <li><a href="#"><img src="images/responsabilidade.png" /><span>responsabilidade social</span></a></li> <li><a href="#"><img src="images/horario.png" /> <span>horário</span></a></li> <li><a href="#"><img src="images/localizacao.png" /> <span>localização</span></a></li> <li><a href="#"><img src="images/contactos.png" /> <span>contactos</span></a></li> <li><a href="#"><img src="images/mapaSite.png" /> <span>mapa do site</span></a></li> <li><a href="#"><img src="images/creditos.png" /> <span>créditos</span></a></li> </ul> </div> </div>