我有4个无序列表，其中包含相同数量的li项目。 它们在显示器中并排放置。 是否有一种简单的方法可以告诉每个孩子的项目（ul-one li：nth-child（1），ul-two li：nth-child（1）等）具有相同的高度？理由是当我填写数据时，一个UL比其他UL高得多，它打破了结构。
我可以想到几种方法来实现这个目标：
jQuery（parent（'ul'）= nth-child index）
CSS w /每行类
转换为表格
这些都不是理想的:-( CSS中是否有任何伪元素可以自动配置所有4个列表项的特定类？让我演示一个例子......
http://www.sinsysonline.com/repair/price.html
（选择Pick Up查看价格网格）
这是我的HTML标记：
<div id="price_charts">
<div id="pri_drop-off" class="grid_12">
<ul class="pricing_table">
<li class="price_block">
<a href="dropoff.html"><h2> </h2></a>
<div class="price">
<div class="price_figure price_con">
<span class="price_number"> </span>
<span class="price_tenure"> </span>
</div>
</div>
<ul class="features serv">
<li class="category"><a href="services_hwrep.html">Hardware Repair</a></li>
<li class="category"><a href="services_netts.html">Network Troubleshooting</a></li>
<li class="category"><a href="services_printsetup.html">Printer Setup</a></li>
<li class="category"><a href="services_osinstall.html">Operating System Install</a></li>
<li class="category"><a href="services_email.html">E-Mail Setup</a></li>
<li class="category"><a href="services_compsetup.html">Computer Setup</a></li>
<li class="category"><a href="services_swinstall.html">Software Install</a></li>
<li class="category"><a href="services_tune.html">Computer Tune Up</a></li>
<li class="category"><a href="services_hwup.html">Hardware Upgrade</a></li>
<li class="category"><a href="services_backup.html">Data Backup & Recovery</a></li>
<li class="category"><a href="services_wifi.html">Wireless Troubleshooting</a></li>
</ul>
</li>
<li class="price_block">
<a href="pickup.html"><h3>Desktop</h3></a>
<div class="price">
<div class="price_figure">
<span class="price_number">$30</span>
<span class="price_tenure">per hour</span>
</div>
</div>
<ul class="features">
<li><a href="services_hwrep.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_netts.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_printsetup.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_osinstall.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_email.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_compsetup.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_swinstall.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_tune.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_hwup.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_backup.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_wifi.html"><img src="../css/images/check.png" /></a></li>
</ul>
<div class="footer">
<a href="contact.html" class="action_button">Contact Us</a>
</div>
</li>
<li class="price_block">
<a href="onsite.html"><h3>Laptop</h3></a>
<div class="price">
<div class="price_figure">
<span class="price_number">$50</span>
<span class="price_tenure">per hour</span>
</div>
</div>
<ul class="features">
<li><a href="services_hwrep.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_netts.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_printsetup.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_osinstall.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_email.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_compsetup.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_swinstall.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_tune.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_hwup.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_backup.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_wifi.html"><img src="../css/images/check.png" /></a></li>
</ul>
<div class="footer">
<a href="contact.html" class="action_button">Contact Us</a>
</div>
</li>
<li class="price_block">
<a href="remote.html"><h3>Server</h3></a>
<div class="price">
<div class="price_figure">
<span class="price_number">$30</span>
<span class="price_tenure">per hour</span>
</div>
</div>
<ul class="features">
<li><a href="services_hwrep.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_netts.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_printsetup.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_osinstall.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_email.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_compsetup.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_swinstall.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_tune.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_hwup.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_backup.html"><img src="../css/images/check.png" /></a></li>
<li><a href="services_wifi.html"><img src="../css/images/check.png" /></a></li>
</ul>
<div class="footer">
<a href="contact.html" class="action_button">Contact Us</a>
</div>
</li>
</ul>
</div>
</div>
当前的JS悬停效果：
$('ul.features li').on('mouseenter mouseleave', function () {
$('ul.features > li:nth-child(' + ($(this).index() + 1) + ' )').toggleClass('pri_active');
$('ul.features > li.category:nth-child(' + ($(this).index() + 1) + ' )').toggleClass('pri_cat');
});
还有很多CSS我会为你节省时间来解密。
所以，基本问题：
是否有一种CSS方式告诉每个等效的子元素自动调整为4中最大的子元素？ （不说（：第一个孩子，：第n个孩子（2）等）
答案 0 :(得分：1)
小的jquery脚本可以做..
请参阅jsfiddle上的DEMO ... http://jsfiddle.net/VcEPT/
body {
margin:0;
padding:0;
width:100%;
font-size:11px;
}
ul{
float:left;
width:95%;
display:inline;
list-style:none;
}
ul li{
float:left;
width:20%;
margin:1%;
background:#dfdfdf;
}
<ul>
<li class="price_block">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</li>
<li class="price_block">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</li>
<li class="price_block">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</li>
<li class="price_block">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</li>
</ul>
$(document).ready(function() {
var max_height = 0;
$('li.price_block:lt(4)').each(function() {
if( $(this).height() > max_height )
max_height = $(this).height();
});
// try to comment On and Off this line
$('li.price_block').css( "height", max_height+'px' );
});
答案 1 :(得分：0)
由于它是表格数据，因此使用表格 - 您提到的示例可以使用列表，因为行的高度相同。
如果你想要弹出效果，在每个单元格中放置div，根据列将类应用于这些div，然后在onmouseover上，将负顶部设置为具有相同类的所有div。
一个简单的例子（效率不高，我知道，随时可以改进）+ fiddle：
HTML：
<table>
<tr>
<td>
<div class='column first'></div>
</td>
<td>
<div class='column second'></div>
</td>
</tr>
<tr>
<td>
<div class='column first'></div>
</td>
<td>
<div class='column second'></div>
</td>
</tr>
</table>
CSS：
.column{
position:relative;
width:100px;
height:100px;
}
.column.first{
background:red;
}
.column.second{
background:blue;
}
使用Javascript：
$('.column.first').mouseover(function(){$('.column.first').each(function(){$(this).css('top', -10);});});
$('.column.first').mouseout(function(){$('.column.first').each(function(){$(this).css('top', 0);});});
$('.column.second').mouseover(function(){$('.column.second').each(function(){$(this).css('top', -10);});});
$('.column.second').mouseout(function(){$('.column.second').each(function(){$(this).css('top', 0);});});