我有一个面板,分为两个部分:左面板和右面板。在右侧面板中,我有未排序的元素列表,而实际上却具有元素列表。li的每个标签具有2个跨度的标签,用于并排放置的图标文件和文本内容。
当前:当文本长度增加时,整个跨度将移至新行。跨度不再并排了。
我需要实现,span1和span2应该并排,并且当span2中的文本增加时,span 2应该垂直增长,而不是完全移到新行。
.left_side_panel{
float: left;
width:50%;
padding-right:1.25rem;
}
.right_side_panel{
float: right;
width:20%;
padding-left:1.25rem;
}
.Panel_Info_Contents{
margin-bottom:3.75rem;
}
.userguide{
list-style: none;
}
.userguide li{
border: 5px solid yellow;
display: block;
min-height: 1.75rem;
margin-bottom:0.625rem;
}
a{
cursor: pointer;
color:#ffff;
text-decoration:none;
}
.guide_icon--file{
border: 2px solid green;
display: inline-block;
vertical-align:middle;
margin-right:0.625rem;
width:1.75rem;
height: 1.75rem;
background-repeat: no-repeat;
}
.guide_entrydetails{
display: inline-block;
vertical-align: middle;
color:red;
border: 2px solid blue;
}
<div class="client">
<div class="middlePanel__client__overview">
<div class="left_side_panel">
</div>
<div class="right_side_panel">
<div class="Panel_Info_Contents">
<ul class="userguide">
<li>
<a title="user guide hand book and some more details to reproduce the issue" href="">
<span class="guide_icon--file">
</span>
<span class="guide_entrydetails">
user guide hand book and some more details to reproduce the issue and some more things and some more
</span>
</a>
</li>
</ul>
<ul>
</ul>
</div>
</div>
</div>
</div>
Flexbox可以做到:
.left_side_panel {
float: left;
width: 50%;
padding-right: 1.25rem;
}
.right_side_panel {
float:right;
width: 50%; /* for demo purposes */
padding-left: 1.25rem;
}
.Panel_Info_Contents {
margin-bottom: 3.75rem;
}
.userguide {
list-style: none;
}
.userguide li {
border: 5px solid yellow;
display: block;
min-height: 1.75rem;
margin-bottom: 0.625rem;
}
a {
display: flex; /* this */
cursor: pointer;
text-decoration: none;
}
.guide_icon--file {
border: 2px solid green;
display: inline-block;
vertical-align: middle;
margin-right: 0.625rem;
width: 1.75rem;
height: 1.75rem;
background-repeat: no-repeat;
}
.guide_entrydetails {
display: inline-block;
vertical-align: middle;
color: red;
border: 2px solid blue;
}
<div class="client">
<div class="middlePanel__client__overview">
<div class="left_side_panel">
</div>
<div class="right_side_panel">
<div class="Panel_Info_Contents">
<ul class="userguide">
<li>
<a title="user guide hand book and some more details to reproduce the issue" href="">
<span class="guide_icon--file">I
</span>
<span class="guide_entrydetails">
user guide hand book and some more details to reproduce the issue and some more things and some more
</span>
</a>
</li>
</ul>
<ul>
</ul>
</div>
</div>
</div>
</div>