Question

如何在垂直菜单栏的同一行放置图标（素材图标）和文字。我不想使用桌子，因为我无法同时将鼠标悬停在两个桌面上PKI

<!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>

You can see only one of them is selected when hovering

Answer 1

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>

我不太确定你的期望，但你可以很容易地做到，检查片段。确保使用垂直对齐图标和列表中的链接。

Answer 2

<!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>

如何在垂直菜单栏的同一行中放置一个图标（素材图标）和文本

2 个答案: