我有一个侧面导航栏，文本旁边有图像，显示每个链接的目的地。我希望图像及其各自的链接并排显示。此外，我希望每个链接的边框都相等。 Here's现在看起来如何。
在第一行中，我需要Chords 链接旁边的吉他图标，以下链接及其图标也是如此。这是我正在使用的 CSS。
.sidebar {
display: inline-block;
overflow: hidden;
position: fixed;
margin-top: 60px;
width: 200px;
height: 300px;
background-color: rgba(50, 50, 50, .8);
transition: width .3s ease;
}
.sidebar a {
font-size: 1.8em;
text-decoration: none;
color: white;
border: 1px solid rgba(25, 25, 25, .5);
background-color: rgba(50, 50, 50, 1);
border-collapse: collapse;
transition: background-color .1s ease;
}<div class="sidebar" id="sidebar">
<img src="img/chords.png">
<a href="#">Chords</a>
<img src="img/tabs.png">
<a href="#">Tabs</a>
<img src="img/notereading.png">
<a href="#">Note Reading</a>
</div>我尝试将链接的位置属性设置为相对，这对一个链接有效。但是，当我插入其他元素时，它们并没有像在行内 block 元素中那样运行。也就是说，他们继续在同一条线上。不过，我认为 inline-block 强制元素只有在它们适合的情况下才位于同一行。任何帮助，将不胜感激。谢谢!
最佳答案
inline-block不是你的问题的原因。试试这个 HTML。
.sidebar {
display: inline-block;
overflow: hidden;
position: fixed;
margin-top: 60px;
width: 200px;
height: 300px;
background-color: rgba(50, 50, 50, .8);
transition: width .3s ease;
}
.sidebar a {
display: inline-block;
font-size: 1.5em;
text-decoration: none;
color: white;
border: 1px solid rgba(25, 25, 25, .5);
background-color: rgba(50, 50, 50, 1);
border-collapse: collapse;
transition: background-color .1s ease;
width: 140px;
}
.sidebar img {
transform: translateY(15px);
width: 50px;
}
.sidebar_item {
height:60px;
display: inline-block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="sidebar" id="sidebar">
<div class="sidebar_item">
<img src="https://drive.google.com/uc?id=1TkoF1IzxW9y3Xs1YWYpDeX7qCye3ud45" width=55px height=55px>
<a href="#">Chords</a>
</div>
<div class="sidebar_item">
<img src="https://drive.google.com/uc?id=1lLkosBRSHmuz6MRN-Vb3UQsX7MrfaX1v" width=55px height=55px>
<a href="#">Tabs</a>
</div>
<div class="sidebar_item">
<img src="https://drive.google.com/uc?id=1lLkosBRSHmuz6MRN-Vb3UQsX7MrfaX1v" width=55px height=55px>
<a href="#">Note Reading</a>
</div>
</div>
</body>
</html>关于html - 如何将我的图像与行内 block 中的文本对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54965498/