主页 / 问题 / 1557431
Accepted
chbronson
Asked:2023-12-15 23:24:33 +0000 UTC2023-12-15 23:24:33 +0000 UTC

CSS。设计带有计数器的列表 <dl>

  • 772

CodePen上有这样一个列表的例子， 是否可以将dt中的长文本与第一行的第一个字母对齐？使它看起来像这样： https://i.postimg.cc/zfj2y9V4/demo.jpg

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: $body-background-color;
  font-family: $base-font-family;
  font-size: $font-size-small;
  color: $body-text-color;
  line-height: 1.5;
}

.dl-blurbs {
  display: grid;
  @include tablet-up {
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
  }
}


/* LIST */

dl {
  counter-reset: count;
  background: $dl-gradient-right;
  padding-left: 4vw; //default is smartphone
  padding-right: 4vw;
  margin: 0;
  @include tablet-up {
    padding-left: 2vw;
  }
  @include desktop {
    padding-top: 3vw;
    padding-bottom: 3vw;
  }
}

dl+dl {
  counter-reset: counter 4;
}

dt {
  counter-increment: count;
  color: $cadet;
  font-family: $base-font-family;
  font-size: 4vw;
  text-transform: uppercase;
}

dt::before {
  content: counter(count, decimal-leading-zero)".";
  font-family: $heading-font-family;
  color: $maximum-blue;
  margin-left: -1vw;
  padding-right: 12px;
}

dd {
  margin-left: 5vw;
  margin-bottom: 2vh;
}
<section class="dl-blurbs">
  <dl>
    <dt>Design</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
    <dt>Develop</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
    <dt>Test</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
  </dl>
  <dl>
    <dt>Deliver</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
    <dt>Rinse</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>

    <dt>Repeat</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
  </dl>
</section>

css

1 个回答

  1. Best Answer

    好吧...你可以制作一个位于标题之外的计数器，然后你就不需要对齐它

    html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: $body-background-color;
  font-family: $base-font-family;
  font-size: $font-size-small;
  color: $body-text-color;
  line-height: 1.5;
}

.dl-blurbs {
  counter-reset: count; /*здесь, чтоб без dl+dl{4} работал*/
  display: grid;
  @include tablet-up {
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
  }
}


/* LIST */

dl {
  background: $dl-gradient-right;
  padding-left: 4vw; //default is smartphone
  padding-right: 4vw;
  margin: 0;
  @include tablet-up {
    padding-left: 2vw;
  }
  @include desktop {
    padding-top: 3vw;
    padding-bottom: 3vw;
  }
}

dt {
  counter-increment: count;
  color: $cadet;
  font-family: $base-font-family;
  font-size: 4vw;
  text-transform: uppercase;
  display: grid;  /*!!!!!!*/
  grid-template-columns: auto 1fr; /*!!!!!!!*/
}

dt::before {
  content: counter(count, decimal-leading-zero)".";
  font-family: $heading-font-family;
  color: $maximum-blue;
  margin-left: -1vw;
  padding-right: 12px;
  color: darkred;/*-----------*/
  border: 1px solid orange;/*--------*/
}

dd {
  margin-left: 5vw;
  margin-bottom: 2vh;
}
    <section class="dl-blurbs">
  <dl>
    <dt>Design DesignDesign DesignDesignDesign DesignDesignDesign</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
    <dt>Develop</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
    <dt>Test</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
  </dl>
  <dl>
    <dt>Deliver</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
    <dt>Rinse</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>

    <dt>Repeat</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
  </dl>
</section>

    • 1

相关问题