代码之家 › 专栏 › 技术社区 › frank-dspeed

如何使用css-before属性作为自己的列,比如ul中的li

flexbox css

frank-dspeed · 技术社区 · 7 年前

你好,我搜索了几个小时,我不知道我可能遗漏了一些东西,但我不能缠绕我的头,我需要2列一个是通过css插入内容生成的,另一个应该是正常的内容文本,但我根本没有得到它。

我想创建一个自定义列表,这样我就需要

<ul><li></li></ul>

    <div class="flex-container">
    Long Text is Here Long Text is Here Long Text is Here Long Text is 
Here Long Text is Here Long Text is Here Long Text is Here Long Text is 
Here Long Text is Here Long Text is Here This long Text Schould be 
<strong class="no-wrap">Importent: </strong> 
<strong class="no-wrap"> All in One single line &nbsp; </strong> 
i only need one colum for the before tag it should not wrap the text nodes 
before and after the strong nodes i need a 2 colum layout one col for the 
before css attr and one col for the rest of the text ignoring the strong

    </div>

@import "compass/css3";
.flex-container:before { 
counter-increment: h22; 
content: counter(h22) ". "; 
min-width: 0.8cm;    
}

.flex-container{
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.no-wrap{
  flex-shrink: 0;
}

应该是这样的:

长文本在这里长文本在这里长文本在这里长文本在这里长文本在这里是长文字这里是长文字这里是长文字这里是长文字这里长文本在这里长文本在这里长文本应该在这里 重要的是:所有在一行 在强节点之前和之后,我需要一个2列的布局,一列用于在css attr和一个col之前忽略强

https://codepen.io/frank-dspeed/pen/KJMRwG

1 回复 | 直到 7 年前

frank-dspeed 7 年前

由于我没有及时得到有价值的答案,我现在会自己回答,我发现一些实验的解决方案只花了我几个小时,因为我不熟悉这种情况。

body { counter-reset: h21 h22 h23; }
.flex-container:before { 
    counter-increment: h22; 
    content: counter(h22) ". "; 
    min-width: 0.8cm;
    margin-left: -0.8cm;
    position: absolute;
  }
.flex-container { 
    position: relative;
    padding-left: 0.8cm;
    font-size: 11pt; 
    font-weight: normal; 
    margin: 0px;
    padding-bottom: 11pt;     
  /*disabled by me because if we choose flex this can't render right as it treats tags as cols*/
}

https://codepen.io/frank-dspeed/pen/xMOagZ