[英]How to vertically and horizontally align an image in a DIV without altering width/height?
[英]Is it possible to align element's width like in a table with CSS without altering HTML?
我已經整理了當前菜單的演示 。 改變HTML結構是不可行的。
HTML
<ul class="menu row1">
<li>item</li>
<li>varied item</li>
<li>item</li>
<li>item</li>
</ul>
<ul class="menu row2">
<li>longer item</li>
<li>item</li>
<li>longer item</li>
</ul>
CSS
.menu li {
display: inline-block; border-right: 1px solid;
padding: 0 10px; margin: 0; line-height: 32px;
}
.menu {border: 1px solid; margin: 10px 10px 0;}
.menu.row2 {margin-top: 0; border-top: 0;}
.menu li, .menu {border-color: #888;}
JS
var $row0 = $('.menu.row1 > li');
var $row1 = $('.menu.row2 > li');
for (x=0; x < $row0.length; x++) {
if (typeof $row1[x] != 'undefined') {
var w1 = $($row0[x]).width();
var w2 = $($row1[x]).width();
var w3 = Math.max(w1, w2);
$($row0[x]).add($row1[x]).width(w3);
}
}
是否可以僅使用CSS獲得與當前JS相同的效果? 謝謝。
更新:
新的CSS
.menu li {
display: table-cell; border: 1px solid #888;
padding: 0 10px; margin: 0; line-height: 32px;
border-left: 0;
}
.menu {margin: 10px 10px 0; display: table-row;}
.menu.row2 {margin-top: 0;}
.menu.row2 li {border-top: 0;}
IE8及以上版本支持 。
您可能希望使用display: table/table-row/table-cell
with vertical-align:bottom;
: http : //www.quirksmode.org/css/display.html#table
添加display:table-row;
在.menu
和display:table-cell
on .menu > li
,這應該可以解決問題
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.