这是我的html外观:

<div class="right fly" style="top: 45px;">
<div class="dataContainer">
    <div class="fuelLvlInfo">
        <div class="header"><i class="ion-arrow-down-b"></i>Paliwo - poziomowskaz</div>
        <ul>
            <li class="usage"><div class="n"><span>Zużycie [l]:</span></div><div class="v">24</div></li>
            <li class="lvl"><div class="n"><span>Poziom paliwa [l]:</span></div><div class="v">---</div></li>
            <li class="avgUsageKm"><div class="n"><span>Śr. zużycie [l/100km]:</span></div><div class="v">46.4</div></li>
            <li class="avgUsageHour"><div class="n"><span>Śr. zużycie [l/h]:</span></div><div class="v">---</div></li>
        </ul>
    </div>

    <div class="fuelflowInfo">
        <div class="header"><i class="ion-arrow-down-b"></i>Paliwo - przepływomierz</div>
        <ul>
            <li class="usage"><div class="n"><span>Zużycie [l]:</span></div><div class="v">1</div></li>
            <li class="avgUsageKm"><div class="n"><span>Śr. zużycie [l/100km]:</span></div><div class="v">1.9</div></li>
            <li class="avgUsageHour"><div class="n"><span>Śr. zużycie [l/h]:</span></div><div class="v">---</div></li>
            <li class="counter"><div class="n"><span>Licznik [l]:</span></div><div class="v">---</div></li>
        </ul>
    </div>
</div>




这是预览:

javascript - 具有内容自动宽度的div以及div自动宽度的父级-LMLPHP

我需要什么:使.right为自动宽度,并且li中的div必须为50%宽度或等于最长的div.n内容的宽度。

尝试空白:nowrap; display:inline-block等不起作用。

https://jsfiddle.net/eta71Lbx/

预览我的期望:

宽度50%
javascript - 具有内容自动宽度的div以及div自动宽度的父级-LMLPHP
或宽度固定为内容长度(在左侧或右侧)
javascript - 具有内容自动宽度的div以及div自动宽度的父级-LMLPHP

最佳答案

您正在使用span元素,该元素将根据内容缩小with。我会避免使用跨度。
但是,如果您需要使用它,则可以使用jQuery解决菜单的.right部分。


> div { width:50%; }处删除50%
white-space:nowrap;添加到
.n类。
(如果创建列表后已经包含jQuery,则
不要执行此步骤)。包括jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
将以下信息添加到ready或所需的函数中:

$(document).ready(function() {var maxWidth = 0;$( "li .n" ).each(function( index ) {var w = parseInt($(this).css('width').replace('px', ''));if(maxWidth<w){maxWidth = w;}});var m = maxWidth + 'px';$( ".n" ).css('width', m);});



https://jsfiddle.net/eta71Lbx/3/

希望有帮助!

10-05 20:38
查看更多