href 锚点宽度保持为零

Question

我的 href 锚点有问题：我无法显示它；它的宽度保持为零，因此我放入的图像不显示，也无法单击。它适用于文本，但不适用于我的图像；但是，当我将 href 锚点从代码中删除时，它们确实会显示出来，因此问题不在于图像源。

我在锚标签中添加了 style="display: inline-block; width: 100%;" （我也尝试设置一个固定宽度为 width: 25px;），但是宽度为我的锚仍然为空...

你们中的一些人知道如何解决这个问题吗？

谢谢！

.levels{
    background-color: #fff;
    padding: 3%;
    margin-bottom: 20px;
}

.levels_rows{
    display: flex;
    width: 100%;
    flex-direction: row;
}

.global{
    display: flex;
    width: 20%;
    flex-direction: column;
    padding-right: 2%;
}

.other{
    display: flex;
    flex-direction: row;
    width: 25%;
}

<div class="levels">
  <div class="levels_rows">
    <div class="global">
      <p style="font-size:14px; font-weight:900; text-transform:uppercase; margin-bottom: 2%;">Title</p>
      <div class="other">
        <a style="display: inline-block; width: 100%;" href="#URL">
          here I have an image
        </a>
      </div>
    </div>
  </div>
</div>

Answer 1

我想我找到了。

.levels{
    background-color: #fff;
    padding: 3%;
    margin-bottom: 20px;
}

.levels_rows{
    display: flex;
    width: 100%;
    flex-direction: row;
}

.global{
    display: flex;
    width: 100%;
    flex-direction: column;
    padding-right: 2%;
}

.other{
    display: flex;
    flex-direction: row;
    width: 100%;
}

<div class="levels">
  <div class="levels_rows">
    <div class="global">
      <p style="font-size:14px; font-weight:900; text-transform:uppercase; margin-bottom: 2%;">Title</p>
      <div class="other">
        <a href="www.google.com" target = "_blank">
          <img src="https://img.freepik.com/free-photo/closeup-acrylic-paints-background_23-2148315460.jpg?size=626&ext=jpg"></a>
      </div>
    </div>
  </div>
</div>

Answer 2

.global{
display: flex;
width: 100%;
flex-direction: column;
padding-right: 2%;
}

.other{
display: flex;
flex-direction: row;
width: 100%;
}

我将全局和其他类中的宽度更改为 100%，文本对齐。这是你要的吗？