Question

所以我想创建this

到目前为止，这是我的代码：

CSS

ol{
    list-style-type:decimal;
}
ol li{
    color: #9e9e9e;
    font-size:50px;
    font-weight:lighter;
    list-style-position:inside;

}

HTML

<ol>
        <li>
            <ul>
            <li><b>Title</b></li>
            <li><p class="subtitulos"Subtitle</p></li>
            <li>Stuff 1</li> 
            <li>Stuff 2</li>
            <li>Stuff 3</li>
            </ul>
        </li>
    </ol>

相反，我得到的所有内容都像数字（标题，副标题，东西......等）

我正在使用离子框架制作应用

Answer 1

使用变量计算数字（1,2,3）是否更容易，然后使用例如使用flexbox的表格或div框来假定视图？

<div class="wrapper">
  <div class="row">
    <div class="left">
      1
    </div>
    <div class="right">
      <ul>
        <li><b>Title</b></li>
        <li><p class="subtitulos"Subtitle</p></li>
        <li>Stuff 1</li> 
        <li>Stuff 2</li>
        <li>Stuff 3</li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="left">
      2
    </div>
    <div class="right">
      <ul>
        <li><b>Title</b></li>
        <li><p class="subtitulos"Subtitle</p></li>
        <li>Stuff 1</li> 
        <li>Stuff 2</li>
        <li>Stuff 3</li>
      </ul>
    </div>
  </div>
</div>

Query -

    Select * from SecDb..LoginOwnerTb where SvrId= 45566 and OwnerRitsId = '1001167635';
    OUTPUT TO '/tmp/sometable.csv' FORMAT ASCII DELIMITED BY ';' QUOTE '';
    go

Answer 2

根据你想要完成的事情，我建议把大数字放在div中，而不是试图嵌套列表。这样你就可以控制定位。下面我为数字div创建了一个.num类。我还添加了.wrap类，其中包含数字div和列表的display: table。然后我在display: table-cell和.num上设置ul，以便它们以相同的高度显示。然后，我在vertical-align: middle上设置.num，使其垂直居中。

ul {
  list-style-type: none;
  display: table-cell;
}

ul li {
  color: #9e9e9e;
  font-size: 18px;
  font-weight: lighter;
  list-style-position: inside;
}

.wrap {
  display: table;
  margin: 20px 0;
  border: 1px solid black;
  padding: 10px;
}

.num {
  display: table-cell;
  font-size: 30px;
  vertical-align: middle;
}

<div class="wrap">
  <div class="num">1</div>
  <ul>
    <li><b>Title 1</b></li>
    <li>
      <p class="subtitulos">Subtitle 1</p>
    </li>
    <li>Stuff 1</li>
    <li>Stuff 2</li>
    <li>Stuff 3</li>
  </ul>
</div>
<div class="wrap">
  <div class="num">2</div>
  <ul>
    <li><b>Title 2</b></li>
    <li>
      <p class="subtitulos">Subtitle 2</p>
    </li>
    <li>Stuff 1</li>
    <li>Stuff 2</li>
    <li>Stuff 3</li>
  </ul>
</div>

Answer 3

你可以选择ol直接儿童，因为li必须是ol或ul的直接孩子。它仍然会选择嵌套的ol li。

ol > li {}

但是，您应该使用类和样式类。 HTML选择器太宽，您将遇到选择器冲突。

如何仅为有序列表项设置样式？嵌套在里面的无序列表项

3 个答案: