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

Question

这是我的 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>

这是预览:

我需要的是:使 .right 成为自动宽度，li 中的 div 必须是 50% 宽度或宽度等于最长的 div.n 内容。

尝试了空白:nowrap；显示:内联 block 等不工作。

https://jsfiddle.net/eta71Lbx/

预览我所期望的:

50% 宽度 或宽度固定为内容长度(在左侧或右侧)

Answer 1

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

• 删除 > div { width:50%; } 处的 50%
• 添加white-space:nowrap;到.n类(class)。
• (如果您在创建列表后已经包含了 jQuery，那么不要做这一步)。包括 jQuery: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

• 将以下内容添加到准备好的或您想要的函数中:

  $(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/

希望对您有所帮助!