列表中的图像和文本内联

Question

我希望将图像和文本保持内联（彼此相邻）并在 href 中超链接，但每个超链接项目都在 2 列列表中，如下所示：

.links {
        display: block;
        margin: 0 -1em;
        overflow: hidden; 
        padding: 1em 0;

            li {
                box-sizing: border-box;
                float: left;
                padding: 1em;
                list-style: none;
                width: 50%;
                    &:nth-of-type(2n+1) {
                        clear: left;
                    }

                .grid-pic{
                    height:200px;
                    background-image: url(../images/site/thumbs/boss-holder.png);
                    background-size:contain;
                    background-position: center center;
                    background-repeat:no-repeat;
                    }   

                a {
                    color: $color-secondary;
                    border:3px solid $color-secondary;
                    display: block;
                    font-size: 2em;
                    @extend %font-semibold;
                    line-height: 1;
                    padding: 25% 1em;
                    position: relative;
                    text-align: left;
                    text-decoration: none;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    } }}

<ul class="links">
<li><a href="#section1"><div class="grid-pic"></div>Text</a></li>
<li><a href="#section2"><div class="grid-pic"></div>Text</a></li>
<li><a href="#section3"><div class="grid-pic"></div>Text</a></li>
<li><a href="#section4"><div class="grid-pic"></div>Text</a></li>
</ul>

It currently looks like this
I'd like it to look like this

我正在使用 this expanding grid pen 作为框架，如果有帮助的话。我认为是这份清单让我无法解决问题。

Answer 1

我在您的 .grid-pic class 中添加了 display:inline-block; 和 vertical-align:middle;，以便将图片放在文字旁边。

.links {
  display: block;
  margin: 0 -1em;
  overflow: hidden;
  padding: 1em 0;
}

.links li {
  box-sizing: border-box;
  float: left;
  padding: 1em;
  list-style: none;
  width: 50%;
  &:nth-of-type(2n+1) {
    clear: left;
  }
}

.links li .grid-pic {
  height: 100px;
  width: 100px;
  background-image: url(http://via.placeholder.com/100x100);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.links li a {
  color: $color-secondary;
  border: 3px solid $color-secondary;
  display: block;
  font-size: 2em;
  @extend %font-semibold;
  line-height: 1;
  padding: 25% 1em;
  position: relative;
  text-align: left;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

<ul class="links">
  <li>
    <a href="#section1">
      <div class="grid-pic"></div>Text</a>
  </li>
  <li>
    <a href="#section2">
      <div class="grid-pic"></div>Text</a>
  </li>
  <li>
    <a href="#section3">
      <div class="grid-pic"></div>Text</a>
  </li>
  <li>
    <a href="#section4">
      <div class="grid-pic"></div>Text</a>
  </li>
</ul>

列表中的图像和文本内联

An image & text inline within a list

html

css

inline

sass

html-lists