Question

我有一个侧面导航栏，并且在文本旁边有图像，这些图像显示了每个链接的目标。我希望图像及其各自的链接并排。另外，我希望每个链接的边界都相等。 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>

我尝试将链接的position属性设置为 relative ，这对一个链接有效。但是，当我插入其他元素时，它们并没有像它们在inline-block元素中那样起作用。也就是说，他们继续在同一行。我认为，仅当行内的强制插入元素适合时，它们才在同一行上。任何帮助，将不胜感激。谢谢！

Answer 1

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>

如何将图片与内联文本中的文字对齐？

1 个答案: