Элементы списка в горизонтальной линии при изменении размера браузера

Question

У меня есть список элементов, который имеет ширину по умолчанию в процентах и ​​минимальную ширину в пикселях. Мне нужно избегать процентного деления для изменения размера, когда область просмотра браузера достигает некоторой степени с.

Первые два 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%   
}

FIDDLE

Answer 1

Вы должны удалить min-width от всех элементов и отрегулируйте также некоторую ширину в%.

демонстрация скрипки