主页 / 问题 / 828064
Accepted
tttyyyrrrryyy
Asked:2020-05-15 17:15:46 +0000 UTC2020-05-15 17:15:46 +0000 UTC

css，html列表的问题

  • 772

有这样一个问题：需要实现如下截图中这样的构造。 在此处输入图像描述

我试图实现 ul，但不知何故它不起作用。

  .li_custom_markk p {
  margin: 0;
  color: #222222;
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  line-height: 1.25;
  letter-spacing: 1.8px;
}

.lipluspadd {
  margin-left: 0px;
  padding-right: 11px;
  border: 1px solid #bbbbbb;
  padding-left: 13px;
  vertical-align: middle;
}

.ul_custom_mark {
  width: 430px;
  height: 327px;
  margin-top: 25px;
  padding: 0;
  margin-left: 27px;
}

.ul_custom_markkk {
  width: 430px;
  height: 327px;
  margin-top: 25px;
  padding: 0;
  margin-left: 27px;
}

.li_custom_marks+.li_custom_marks {
  background: url("../img/icons/2-layers2.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.li_custom_marks+.li_custom_marks+.li_custom_marks {
  background: url("../img/icons/2-layers3.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.li_custom_marks+.li_custom_marks+.li_custom_marks+.li_custom_marks {
  background: url("../img/icons/2-layers4.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.li_custom_marks+.li_custom_marks+.li_custom_marks+.li_custom_marks+.li_custom_marks {
  background: url("../img/icons/2-layers4.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.li_custom_marks+.li_custom_marks+.li_custom_marks+.li_custom_marks+.li_custom_marks {
  background: url("../img/icons/5.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.li_custom_markk+.li_custom_markk {
  background: url("../img/icons/7.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.li_custom_markk+.li_custom_markk+.li_custom_markk {
  background: url("../img/icons/8.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.li_custom_markk+.li_custom_markk+.li_custom_markk+.li_custom_markk {
  background: url("../img/icons/9.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.li_custom_markk+.li_custom_markk+.li_custom_markk+.li_custom_markk+.li_custom_markk {
  background: url("../img/icons/10.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.li_custom_marks p {
  margin: 0;
  color: #222222;
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  line-height: 1.25;
  letter-spacing: 1.8px;
<div class="col-md-5">
  <ul class="ul_custom_mark">
    <div class="lipluspadd">
      <li class="li_custom_marks">
        <p>Внедрение и сопровождение</p>
      </li>
    </div>
    <div class="lipluspadd">
      <li class="li_custom_marks">
        <p>Отпимизация под ваши нужды</p>
      </li>
    </div>
    <div class="lipluspadd">
      <li class="li_custom_marks">
        <p>Разработка уникальных конфигураций</p>
      </li>
    </div>
    <div class="lipluspadd">
      <li class="li_custom_marks">
        <p>Удалённое сопровождение и обслуживание баз данных</p>
      </li>
    </div>
    <div class="lipluspadd">
      <li class="li_custom_marks">
        <p>Интеграция 1С с другими программами и базами данных</p>
      </li>
    </div>
  </ul>
</div>
<div class="col-md-5">
  <ul class="ul_custom_markkk">
    <div class="lipluspadd">
      <li class="li_custom_markk">
        <p>Восстановление баз данных и исправление ошибок</p>
      </li>
    </div>
    <div class="lipluspadd">
      <li class="li_custom_markk">
        <p>Интеграция 1С с оборудованием </p>
      </li>
    </div>
    <div class="lipluspadd">
      <li class="li_custom_markk">
        <p>Консультации по работе 1С</p>
      </li>
    </div>
    <div class="lipluspadd">
      <li class="li_custom_markk">
        <p>Ускорение процессов формирования отчетов, обработок данных</p>
      </li>
    </div>
    <div class="lipluspadd">
      <li class="li_custom_markk">
        <p>Внедрение типовых и собственных конфигураций</p>
      </li>
    </div>
  </ul>
</div>

我无法将所有内容都放入结果中，当为 li 设置一个高度时，我无法将所有内容都居中，因为 某处 2 行文本，某处 3-x。我已准备好删除所有内容并重新开始，但谁能告诉我如何最好地实现这一点？提前非常感谢。代码很糟糕，我知道，但我已经尝试了很多东西，结果却是一团糟。

html

4 个回答

  1. Best Answer

    对于相同高度的左右列，我会使用flexbox：

    .custom_line{
  display: flex;
  margin-bottom: 5px;
}

.custom_mark:first-child{
  background-color: lightyellow;
}
.custom_mark:last-child{
  background-color: lightblue;
}

.col-md-5{
  float: left;
  width: 50%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: left;
}

p{
  padding: 10px;
  margin: 0;
}
    <div class="custom_line">
  <div class="custom_mark col-md-5">
    <p>Внедрение и сопровождение</p>
  </div>
  <div class="custom_mark col-md-5">
    <p>Восстановление баз данных и исправление ошибок</p>
  </div>
</div>
<div class="custom_line">
  <div class="custom_mark col-md-5">
    <p>Внедрение и сопровождение</p>
  </div>
  <div class="custom_mark col-md-5">
    <p>Восстановление баз данных и исправление ошибок</p>
  </div>
</div>

    内部需要分成行和列，反之则不行。

    upd：垂直对齐文本

    • 2 

  2. .block {
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

ul {
  width: 300px;
  display: block;
}

li {
  width: inherit;
  height: 100px;
  background: #000;
  color: #fff;
  border: 1px solid red;
  display: block;
  justify-content: center;
  align-items: center;
  display: flex;
  margin-top: 30px;
}
    <div class="block">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <ul>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

    • 2

  3. 解决这个问题的最好方法是通过column-count: 2. 这是一个示例解决方案：

    .item-list{
    column-count: 2;
    column-gap: 16.66667%;
    list-style: none;
    counter-reset: ulcounter;
}
.item-list li{
    border: 1px solid #000;
    padding: 10px;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
}

.item-list li:before{
    counter-increment: ulcounter;
    content: counter(ulcounter);
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background: #000;
    display: inline-block;
}
.item-list li p {
    margin: 0;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    text-align: left;
    line-height: 1.25;
    letter-spacing: 1.8px;
    display: inline-block;
}

.li_custom_marks p {
    margin: 0;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    text-align: left;
    line-height: 1.25;
    letter-spacing: 1.8px;
}
    <ul class="item-list">
    <li>
        <p>Внедрение и сопровождение</p>
    </li>
    <li>
        <p>Отпимизация под ваши нужды</p>
    </li>
    <li>
        <p>Разработка уникальных конфигураций</p>
    </li>
    <li>
        <p>Удалённое сопровождение и обслуживание баз данных</p>
    </li>
    <li>
        <p>Интеграция 1С с другими программами и базами данных</p>
    </li>
    <li>
        <p>Восстановление баз данных и исправление ошибок</p>
    </li>
    <li>
        <p>Интеграция 1С с оборудованием </p>
    </li>
    <li>
        <p>Консультации по работе 1С</p>
    </li>
    <li>
        <p>Ускорение процессов формирования отчетов, обработок данных</p>
    </li>
    <li>
        <p>Внедрение типовых и собственных конфигураций</p>
    </li>
</ul>

    • 2

  4. 属性order可以通过脚本设置

    *,:before,:after{
  box-sizing:border-box;
}
ol{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:list;
  max-width:400px;
  line-height:1;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
ol li{
  display:flex;
  align-items:center;
  border:1px solid;
  padding:5px;
  margin:0 0 10px;
  width:calc(50% - 15px);
}
ol li:before{
  counter-increment:list;
  content:counter(list);
  display:inline-block;
  width:1.5em;
  height:1.5em;
  text-align:center;
  line-height:1.5;
  background-color:#000;
  color:#fff;
  border-radius:50%;
  flex:0 0 auto;
  margin-right:7px;
}
ol>li:nth-child(1){order:1}
ol>li:nth-child(2){order:3}
ol>li:nth-child(3){order:5}
ol>li:nth-child(4){order:7}
ol>li:nth-child(5){order:9}
ol>li:nth-child(6){order:2}
ol>li:nth-child(7){order:4}
ol>li:nth-child(8){order:6}
ol>li:nth-child(9){order:8}
ol>li:nth-child(10){order:10}
    <ol>
  <li>dasd asd asda sda das </li>
  <li>as dasd asd asd asd </li>
  <li>as dasa a sd asd asdasda g</li>
  <li>asdas das asd asdas dasda </li>
  <li>sad asd asdasf fdsfdsfsd </li>
  <li>dasd asd asda sda das asda sd asd asd</li>
  <li>as dasd asd asd asd </li>
  <li>as dasa a sd asd asdasda g</li>
  <li>asdas das asd asdas dasda </li>
  <li>sad asd asdasf fdsfdsfsd </li>
</ol>

    • 2

相关问题