文本被包装时水平对齐多个div的项目

我在屏幕左侧的div中有一个编号列表。就在那个div的右边，我有另一个div，其中有与编号列表相对应的项目。当屏幕最小化以便第一行中的文本换行到第二行时，我希望编号列表中的2移动到第三行以匹配第二项条目。文本被包装时水平对齐多个div的项目

我已经尝试了几个不同的东西（使用实际编号的列表，使用单个div等），并没有得到任何工作。使用单独的div是最有意义的，但我想要在左侧的单独栏中的编号列表。这可以在链接的小提琴中看到。任何帮助表示赞赏！

下面是它未被包装时的视图。

 
1 First Item 
2 Second Item

下面是包裹时，它目前如何看待。

 
1 First 
2 Item 
    Second 
    Item

下面是我想如何查看包裹时。

 
1 First 
    Item 
2 Second 
    Item

下面是代码：

<div class="xml-block"> 
<div id="xml-sidebar"> 
    <p class="xml-number">1</p> 
    <p class="xml-number">2</p> 
</div> 

<div id="xml-group"> 
    <p class="xml-symbol xml-list">Position of the first entry.</p> 
    <p class="xml-symbol xml-list"><span class="xml-text">Position of the second entry.</span></p> 
</div>

在下面的示例中，当窗口是足够的文字环绕小，从该列表中，2是不调整留在第二项。

https://jsfiddle.net/b1Lpeffw/2/

来源

2017-05-28 EriktheRed

你可以使用CSS计数器的行号代替。该数字不仅与代码对齐，而且简化了代码，因此您不必在标记中使用单独的行号。

html { 
 
\t background-color: #272822; 
 
\t height: 100%; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
#xml-group { 
 
\t padding: 0; 
 
    counter-reset: count; 
 
} 
 

 
#xml-group:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
\t width: 3em; 
 
\t height: 100%; 
 
\t background-color: #1C1C18; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border-right: 1px solid #505050; 
 
} 
 

 
.xml-list { 
 
\t font: 18px Monospace; 
 
\t color: #FFFFFF; 
 
\t text-decoration: none; 
 
\t padding: 0; 
 
\t margin: 0; 
 
    position: relative; 
 
    padding: 0 0 0 4rem; 
 
} 
 

 
.xml-list:before { 
 
    counter-increment: count; 
 
    content: counter(count); 
 
    font: 18px Monospace; 
 
\t color: #505050; 
 
\t text-decoration: none; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 3em; 
 
    text-align: center; 
 
} 
 

 
.xml-text { 
 
\t color: #EA9200; 
 
} 
 

 
li.xml-text-indent1 { 
 
\t margin-left: 1.5em; 
 
} 
 

 
li.xml-text-indent2 { 
 
\t margin-left: 3em; 
 
} 
 

 
li.xml-text-indent3 { 
 
\t margin-left: 4.5em; 
 
} 
 

 
li.xml-text-indent4 { 
 
\t margin-left: 6em; 
 
} 
 

 
.xml-symbol { 
 
\t color: #C177FF; 
 
} 
 

 
.xml-list li p { 
 
\t margin: 0; 
 
\t padding: 0; 
 
}

<body> 
 
    <div class="xml-block"> 
 

 
    <div id="xml-group"> 
 
     <p class="xml-symbol xml-list">Position of the first entry.</p> 
 
     <p class="xml-symbol xml-list"><span class="xml-text">Position of the second entry.</span></p> 
 
    </div> 
 
    </div> 
 
</body>

来源

2017-05-28 22:34:26

文本被包装时水平对齐多个div的项目

回答

相关问题