Question

我的问题在于联系部分，即使我的图标只有几百个像素宽，链接也会在整个页面的一半上自行延伸。请帮忙！

这是我的HTML，这里有一些CSS：（当然，我的项目中有更多样式，但这些是唯一具有定位/ flexbox样式的元素）。

.panel__inner {
  display: flex;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.shows {
  flex-basis: 50%;
}

.contact {
  flex-basis: 50%;
  align-self: center;
}

.contact__icon {
  max-height: 100px;
}

<div class="panel panel-3 heading" id="shows">
  <div class="panel__inner">
    <section class="shows">
      <h1 class="shows__heading">upcoming shows</h1>
      <ul class="shows__list">
        <li class="shows__item">
          <p class="shows__date">Friday August 18st</p>
          <p class="shows__local">Wild Wings Sandhills</p>
        </li>
        <li class="shows__item">
          <p class="shows__date">Saturday August 26th</p>
          <p class="shows__local">Wild Wings Vista</p>
        </li>
        <li class="shows__item">
          <p class="shows__date">Friday September 8th</p>
          <p class="shows__local">Wild Wings Augusta</p>
        </li>
      </ul>
    </section>
    <section class="contact">
      <ul class="contact__list">
        <li class="contact__item">
          <a href="mailto:bandunderthesunsc@gmail.com" target="_top" class="contact__link"><img class="contact__icon contact__icon--envelop" src="assets/envelope.svg"></a>
        </li>
        <li class="contact__item">
          <a href="https://www.facebook.com/BandUnderTheSun/" class="contact__link"><img class="contact__icon contact__icon--facebook" src="assets/facebook-logo.svg" /></a>
        </li>
        <li class="contact__item">
          <a href="" class="contact__link"><img class="contact__icon contact__icon--instagram" src="assets/instagram-logo.svg" /></a>
        </li>
      </ul>
    </section>
  </div>
</div>

提前谢谢大家!!

Answer 1

ul元素的li和.contact后代是块级元素。因此，它们自然会扩展到父级的100％（在这种情况下具有flex-basis: 50%。

如果您不希望列表项占全宽，请执行以下操作：

将ul更改为inline-block或
将display: flex添加到.contact，

所以列表项的宽度取决于内容。

这两个选项都在这里说明：

.panel__inner {
  display: flex;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.shows {
  flex-basis: 50%;
}

.contact {
  flex-basis: 50%;
  align-self: center;
  /* option 1
  display: flex;
   */
}

.contact__icon {
  max-height: 100px;
}

/* option 2 */
.contact__list {
  display: inline-block;
}

.contact__list>li {
  border: 1px dashed red;
}

<div class="panel panel-3 heading" id="shows">
  <div class="panel__inner">
    <section class="shows">
      <h1 class="shows__heading">upcoming shows</h1>
      <ul class="shows__list">
        <li class="shows__item">
          <p class="shows__date">Friday August 18st</p>
          <p class="shows__local">Wild Wings Sandhills</p>
        </li>
        <li class="shows__item">
          <p class="shows__date">Saturday August 26th</p>
          <p class="shows__local">Wild Wings Vista</p>
        </li>
        <li class="shows__item">
          <p class="shows__date">Friday September 8th</p>
          <p class="shows__local">Wild Wings Augusta</p>
        </li>
      </ul>
    </section>
    <section class="contact">
      <ul class="contact__list">
        <li class="contact__item"><a href="mailto:bandunderthesunsc@gmail.com" target="_top" class="contact__link">test<img class="contact__icon contact__icon--envelop" src="assets/envelope.svg"></a></li>
        <li class="contact__item"><a href="https://www.facebook.com/BandUnderTheSun/" class="contact__link">test test<img class="contact__icon contact__icon--facebook" src="assets/facebook-logo.svg"/></a></li>
        <li class="contact__item"><a href="" class="contact__link">test test test<img class="contact__icon contact__icon--instagram" src="assets/instagram-logo.svg"/></a></li>
      </ul>
    </section>
  </div>
</div>

链接延伸到父母的50％灵活基础？

1 个答案: