![](/img/trans.png)
[英]CSS: Make child div width auto to content in it, not the full parent width
[英]Divs with content auto width and also parent of div auto width
这是我的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; display:inline-block等不起作用。
https://jsfiddle.net/eta71Lbx/
预览我的期望:
您正在使用span元素,该元素将根据内容缩小with。 我会避免使用跨度。 但是,如果需要使用它,则可以使用jQuery解决菜单的.right部分。
> div { width:50%; }
> div { width:50%; }
white-space:nowrap;
到.n
类。 <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/
希望有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.