我试图为宽度为200px的移动设备创建一个菜单（是的......只有200px）。所以我在太空中有限制。
所以我用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>
答案 0 :(得分：3)
可能的解决方案：删除左侧填充并使用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>
答案 1 :(得分：3)
在这种情况下，我假设图像高度和宽度为30像素。
* {
font : 1rem "Lato", Arial;
box-sizing : border-box;
}
.notification {
position : relative;
overflow : hidden;
font-weight : 100;
font-size : 1.5rem;
}
.notification a {
display : block;
padding : 1em 3em 1em 2.25em;
width : 100%;
font-size : inherit;
font-weight : inherit;
color : transparent;
background : #00AEEF linear-gradient(to right, #fff, #fff);
text-decoration : none;
background-position : 50% 0;
background-repeat : no-repeat;
background-size : 100% 100%;
}
/* The at-sign: I've also tried to use :first-letter but it
* is unreliable when the first char is not a letter or a digit
*/
.notification a span {
position : absolute;
line-height : 1;
top : 50%;
left : 50%;
color : #fff;
font-weight : bold;
transform : translate(-50%, -50%) scale(0);
transform-origin : 50% 50%;
}
/* The arrow */
.notification a:after {
position : absolute;
content : "\3009";
right : 1em;
top : 50%;
transform : translateY(-50%);
}
/* sliding doors effect, color change and final slide down
* all with proper delays
*/
:checked ~ .notification a {
transition: background-size .2s, color .33s 1s, transform 1s 5s;
transform: translateY(100%);
background-size: 0 100%;
color: #fff;
}
/* pulsing and moving the @-sign */
:checked ~ .notification a span {
animation: pulse-at .66s ease-in-out .33s forwards;
}
@keyframes pulse-at {
0% { transform: scale(0) translate(-50%, -50%); }
20% { transform: scale(1.1) translate(-50%, -50%); }
25% { transform: scale(1) translate(-50%, -50%); }
40% { transform: scale(1) translate(-50%, -50%); left: 50%; }
100% { transform: scale(1) translate(0, -50%); left: 1em; }
}
#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;
}