<分区>
关闭 7 年前。
- 编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
- 这个问题是由于打字错误或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。
<分区>
关闭 7 年前。
我有一个多语言网站。
在网站的左侧有一个导航菜单。那里的元素向左浮动。但是列表中的一项(第二项)向左浮动太多。我尝试使用 li:nth-child(2) psuedo 选择来解决这个问题。这一切都很顺利。但是在其他页面(另一种语言)上，第二项向右浮动太多。
问题:
是否有另一种方法可以在不使用内联 css 的情况下仅对列表中的 1 个元素进行样式设置？ (我无权访问 html)。
.welcome80 .media-list .item-readmore {
margin-top: 12px;
font-size: 12px;
float: left;
}<li class="">
<a class="item-image" href="http://www.ace-fibreoptic.com/index.php/news.html#ericsson-toteutti-estwin-projektin-tkf-n-ace-konseptin-mukaisesti" title="">
<img src="http://www.ace-fibreoptic.com/media/catalog/product/cache/3/small_image/125x/9df78eab33525d08d6e5fb8d27136e95/e/s/estwin_630x316.jpg" alt="">
</a>
<h2 class="item-name"><a href="http://www.ace-fibreoptic.com/index.php/news.html#ericsson-toteutti-estwin-projektin-tkf-n-ace-konseptin-mukaisesti" title="Ericsson toteutti EstWin-projektin TKF:n ACE-konseptin mukaisesti">Ericsson toteutti EstWin-projektin TKF:n ACE-konseptin mukaisesti</a></h2>
<div class="item-desc">
<p>Viron EstWin-hankkeen tavoitteena on rakentaa optinen valokuituverkko kattamaan lähes koko Viro. Hankkeen urakoitsija Ericsson toteutti vuoden 2015 projektin TKF:n ACE-konseptin mukaisesti.</p>
</div>
<div class="item-readmore">
<a href="http://www.ace-fibreoptic.com/index.php/news.html#ericsson-toteutti-estwin-projektin-tkf-n-ace-konseptin-mukaisesti">Lue lisää... ></a>
</div>
</li>截图示例:
https://i.gyazo.com/1bdbdc0831d970cbd4057170aa3d1339.png
如您所见，第二项向左浮动太多。
最佳答案
用另一个 div 包装两个 div - item-desc 和 item-readmore 并应用 overflow-hidden
.welcome80 .media-list .item-readmore {
margin-top: 12px;
font-size: 12px;
float: left;
}
.item-text{
overflow: hidden;
}<li class="">
<a class="item-image" href="http://www.ace-fibreoptic.com/index.php/news.html#ericsson-toteutti-estwin-projektin-tkf-n-ace-konseptin-mukaisesti" title="">
<img src="http://www.ace-fibreoptic.com/media/catalog/product/cache/3/small_image/125x/9df78eab33525d08d6e5fb8d27136e95/e/s/estwin_630x316.jpg" alt="">
</a>
<h2 class="item-name"><a href="http://www.ace-fibreoptic.com/index.php/news.html#ericsson-toteutti-estwin-projektin-tkf-n-ace-konseptin-mukaisesti" title="Ericsson toteutti EstWin-projektin TKF:n ACE-konseptin mukaisesti">Ericsson toteutti EstWin-projektin TKF:n ACE-konseptin mukaisesti</a></h2>
<div class="item-text">
<div class="item-desc">
<p>Viron EstWin-hankkeen tavoitteena on rakentaa optinen valokuituverkko kattamaan lähes koko Viro. Hankkeen urakoitsija Ericsson toteutti vuoden 2015 projektin TKF:n ACE-konseptin mukaisesti.</p> </div>
<div class="item-readmore">
<a href="http://www.ace-fibreoptic.com/index.php/news.html#ericsson-toteutti-estwin-projektin-tkf-n-ace-konseptin-mukaisesti">Lue lisää... ></a>
</div>
</div>
</li>关于html - CSS :nth-child() psuedo selecting，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35844463/