Как разместить значок (Значок материала) и текст в одной строке в вертикальной строке меню

Как разместить значок (Значок материала) и текст в той же строке в вертикальной строке меню. Я не хочу использовать таблицу, так как я не буду иметь возможность парить над обоими одновременно You can see only one of them is selected when hovering Как разместить значок (Значок материала) и текст в одной строке в вертикальной строке меню

<!DOCTYPE html> 
<html> 
<head> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"  rel="stylesheet"> 

<style> 
ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 200px; 
background-color: #5A7A88; 
} 

li a { 
display: block; 
color: lightgrey; 
padding: 8px 0 8px 16px; 
text-decoration: none; 
} 


li a:hover { 
background-color: #7D8D96; 
color: white; 
} 


.menu { 
width: 240px; 
height:100%; 
position:absolute; 
background:#5A7A88; 
left:0px; 
transition: all .3s ease-in-out; 
-webkit-transition: all .3s ease-in-out; 
-moz-transition: all .3s ease-in-out; 
-ms-transition: all .3s ease-in-out; 
-o-transition: all .3s ease-in-out; 
    } 

.menu-icon { 
padding:10px 20px; 
background:#5A7A88; 
color:#987D3E; 
cursor:pointer; 
float:right; 
margin-top:4px; 
border-radius:5px; 
} 

#menuToggle { 
display:inline; 
} 

#menuToggle:checked ~ .menu { 
position:absolute; 
left:0px; 
} 
</style> 
</head> 
<body> 


<nav class="menu"> 
<ul> 
<table> 
<tr> 
<td><li><a class="material-icons">add</a></li></td> 

<td><li><a href="#home">APPLICATION INFO</a></li></td> 

</tr> 
<tr> 
<td><li><a class="material-icons">add</a></li></td> 

<td><li><a href="#home">DEVICE INFO</a></li></td> 
</tr> 
<tr> 
<td><li><a class="material-icons">add</a></li></td> 

<td><li><a href="#home">PROCESS LIST</a></li></td> 
</tr> 
<tr> 
<td><li><a class="material-icons">add</a></li></td> 

<td><li><a href="#home">REMOTE CONTROL HISTORY</a></li></td> 
</tr> 





    <td><li><a class="material-icons">add</a></li></td> 


</table> 
</ul> 
</nav> 


</body> 
</html>

источник

2016-06-02 Narayanan

HI теперь вы можете использовать jquery ui accordian –

Пожалуйста, покажите нам какой-нибудь код. что ты уже испробовал? – AlexG

Как я могу вставить свой код здесь, слишком долго для меня здесь. – Narayanan

ul { 
 
    list-style-type: none; 
 
} 
 
ul li .material-icons, ul li a { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.material-icons { 
 
    font-size: 50px; 
 
    margin-right: 7px; 
 
}

<html> 
 
    <head> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
     rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
    <ul> 
 
    <li> 
 
    <i class="material-icons">3d_rotation</i> 
 
    <a href="#">Link One</a> 
 
    </li> 
 
</ul> 
 
    </body>

Я не слишком уверен, что вы ожидаете, но вы можете легко это сделать, проверьте фрагмент. Убедитесь, что вы используете вертикальное выравнивание по значку и ссылку в списке.

источник

2016-06-02 12:19:07 TheEarlyMan

Похоже, что вы разместили изображение в классе span, но я хотел бы включить в него значки дизайна материалов, такие как очень близко к тексту. Я также хотел, чтобы значок появлялся больше, когда панель меню сжимается и наоборот. Самое главное, я хотел реализовать это без бутстрапа. – Narayanan

Просто замените .icons на .material-icons или ваш класс и удалите изображение. – TheEarlyMan

После замены кода на Я получаю вывод как «лицо» курсивом – Narayanan

<!DOCTYPE html> 
<html> 
<head> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
    rel="stylesheet"> 
<style> 
body { 
margin: 0; 
} 

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 25%; 
background-color: #f1f1f1; 
position: fixed; 
height: 100%; 
overflow: auto; 
} 

li a { 
display: block; 
color: #000; 
padding: 8px 0 8px 16px; 
text-decoration: none; 
} 

li a.active { 
background-color: #4CAF50; 
color: white; 
} 

li a:hover:not(.active) { 
background-color: #555; 
color: white; 
} 

ul li .material-icons, ul li a { 
display: inline-block; 
vertical-align: middle; 
} 

.material-icons { 
font-size: 20px; 
margin-right: 7px; 
} 
</style> 
</head> 
<body> 

<ul> 
<li> 
<a href="#"><i class="material-icons">3d_rotation</i>Link One</a> 
<a href="#"><i class="material-icons">3d_rotation</i>Link One</a> 
<a href="#"><i class="material-icons">3d_rotation</i>Link One</a> 
<a href="#"><i class="material-icons">3d_rotation</i>Link One</a> 
</li> 
</ul> 

<div style="margin-left:25%;padding:1px 16px;height:1000px;"> 

</div> 

</body> 
</html>

источник

2016-06-02 13:36:42 Narayanan

@Vividua Elsaphe, попробуйте запустить этот код и увидеть результат – Narayanan

Как разместить значок (Значок материала) и текст в одной строке в вертикальной строке меню

ответ

Смежные вопросы