0
我有一个列表项目,其中有默认宽度的百分比和最小宽度像素。当浏览器视口达到某种程度时,我需要避免使用百分比div来调整大小。在浏览器上水平行列表项目调整大小
前两个li工作正常,但第三个li将在您调整浏览器大小时转到下一行。我也需要在同一条线上做出一点。
这里是我的代码
.project-data-panel{
background: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 3px solid #ccc;
overflow: hidden;
margin-bottom:10px;
width:100%;
min-width:758px
}
.project-detail-subheadleft{
width:98%;
min-width:330px;
font-size:12px;
font-weight:bold;
background:#F7F7F7;
border-bottom:solid #ccc 1px;
padding:5px
}
.project-detail-subheadleft ul{
float:right
}
.project-detail-subheadleft li{
display:inline-block;
padding-left:2px;
}
.gma-head{
display:inline-block;
width:55%;
font-size:12px;
font-weight:bold;
float:left;
min-width: 180px;
}
.project-detail-subheadright{
width:48%;
font-size:12px;
font-weight:bold;
background:#fff;
}
.pmr-head{
display: inline-block;
width: 195px;
font-size: 12px;
font-weight: bold;
background: #F7F7F7;
padding: 5px 0 5px 5px;
border-bottom: solid #ccc 1px;
margin-left: 11px;
position:relative
}
.activity-head{
display: inline-block;
width: 100%;
font-size: 12px;
font-weight: bold;
background: #F7F7F7;
padding: 5px 0 5px 5px;
border-bottom: solid #ccc 1px;
}
.project-detail-header li, .project-data > ul > li{
display:inline-block;
vertical-align:top;
float:left
}
li.project-detail-headerleft, .project-data-headerleft{
width:44%
}
li.project-detail-headermiddle{
}
li.project-detail-headerright{
width: 30%;
padding-left: 11px;
}
.project-data-headerright{
width:31%
}
但Y '6.13.9August' 文本是要下一行? – Sowmya
而我需要px中的最小宽度div – Sowmya
@Sowmya请检查我的更新。也让我知道你在我的小提琴演示中仍然需要什么。 – Parixit