css :nth-child() psuedo selecting

我有一个多语言网站。

在网站的左侧有一个导航菜单。其中的项目向左浮动。但是列表中的 1 项（第二个）向左浮动太多。我试图使用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.&nbsp; 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ää...&nbsp;&gt;</a>
  </div>
</li>

截图示例：

https://i.gyazo.com/1bdbdc0831d970cbd4057170aa3d1339.png

如您所见，第 2 项向左浮动太多。

用另一个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.&nbsp; 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ää...&nbsp;&gt;</a>
            </div>
            </div>
        </li>

从阅读注释来看，HTML之间似乎不会有任何变化，这使得这对于CSS来说是不可能的任务。

我建议使用 jQuery 从根元素中获取"lang"属性的值，因为您已经提到这确实会发生变化。

j查询：

$( 'html:first' ).attr( 'lang' )

这将返回所说的"lang"值，您可以使用该值来检查页面是否为英语。然后，您将使用 .addClass() 方法将具有特定样式的类添加到有问题的元素。

引用：

http://api.jquery.com/attr/
http://api.jquery.com/first-selector/
http://api.jquery.com/addClass/

希望这一切都有所帮助。如果您需要有关脚本的更多帮助。请让我知道。

编辑：

在回答时，这个问题并不太清楚，因此此解决方案不是这种情况的最佳解决方案。这可能对将来的某人有用，所以我会把它贴出来。

列表的父类和：nth-child（）选择器将起作用。

您的屏幕截图告诉我您的图像正在浮动，因此文本换行在下方。

您可以使用缓冲区来保留内容并将其设置为溢出：隐藏。

编辑：这是我在这里找到的关于你的麻烦的英语最清晰的解释：http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

请参阅下面的演示，添加了背景以查看元素的位置：

.welcome80 .media-list .item-readmore {
  margin-top: 12px;
  font-size: 12px;
  float: left;
}
.item-image {
  float: left;
  margin: 1em;
}
 
/* fix */
.buffer {
  overflow:hidden;
  }
/* let's see */
* {
  background:rgba(0,0,0,0.1);

<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.&nbsp; Hankkeen urakoitsija Ericsson toteutti vuoden 2015 projektin TKF:n ACE-konseptin mukaisesti.</p>
    <p>Viron EstWin-hankkeen tavoitteena on rakentaa optinen valokuituverkko kattamaan lähes koko Viro.&nbsp; 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ää...&nbsp;&gt;</a>
  </div>
</li>
<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>
  <div class="buffer">
    <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">FIX ME <br/>HERE</a></h2>
    <div class="item-desc">
      <p>Viron EstWin-hankkeen tavoitteena on rakentaa optinen valokuituverkko kattamaan lähes koko Viro.&nbsp; Hankkeen urakoitsija Ericsson toteutti vuoden 2015 projektin TKF:n ACE-konseptin mukaisesti.</p>
      <p>Viron EstWin-hankkeen tavoitteena on rakentaa optinen valokuituverkko kattamaan lähes koko Viro.&nbsp; 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ää...&nbsp;&gt;</a>
    </div>
  </div>
</li>

通过解决方法解决了。我把存储链接的容器做得大一点（增加了宽度）。现在他们的行为符合预期。

相关内容

最新更新

热门标签：