Question

我正在整理[网站模板] [1]。

编辑器中的代码是：

<div class="post-meta vcard"><p>
<a href="http://wordpress-114402-466332.cloudwaysapps.com/france/" rel="tag">France</a>, 
<a href="http://wordpress-114402-466332.cloudwaysapps.com/france/paris/" rel="tag">Paris</a>, 
<a href="http://wordpress-114402-466332.cloudwaysapps.com/france/paris/things-to-do/" rel="tag">Things to Do in Paris</a>
</p></div>

我希望输出只是巴黎，法国。我如何用CSS实现这一目标？假设步骤是反向顺序并删除列表中的第一个变量。

Answer 1

棘手的部分是使用逗号。您可以看到悬停在标签上的效果。

我使用flexbox显示标记，并在row-reverse上使用hover。请记住，项目的实际顺序不会改变，因此当将最后一个孩子悬停在屏幕上时实际上是弹性框中的第一个孩子。

希望这有帮助。

＆＃13;

.container {
  max-width: 400px;
  text-align: center;
}

.tags {
  display: flex;
  justify-content: center;
}

.tags:hover {
  flex-direction: row-reverse;
}

.tags:not(:hover)>span:not(:last-child)::after,
.tags:hover>span:not(:first-child)::after {
  content: ", ";
}

.tags:hover>span:last-child {
  display: none;
}

＆＃13;

<div class="container">
  <div><img src="http://via.placeholder.com/350x150"></div>
  <div class="tags">
    <span>France</span><span>Paris</span><span>Things to do in Paris</span>
  </div>
</div>

＆＃13;

Answer 2

我敢这样做：

＆＃13;

p {
  direction: rtl;
  color: transparent;
}

p a {
  display: inline-block;
}

p a:nth-child(3) {
  display: none;
}

＆＃13;

<div class="post-meta vcard">
  <p>
    <a href="http://wordpress-114402-466332.cloudwaysapps.com/france/" rel="tag">France</a>,
    <a href="http://wordpress-114402-466332.cloudwaysapps.com/france/paris/" rel="tag">Paris</a>,
    <a href="http://wordpress-114402-466332.cloudwaysapps.com/france/paris/things-to-do/" rel="tag">Things to Do in Paris</a>
  </p>
</div>

＆＃13;

这里是codepen。

Answer 3

您需要了解这不是最好的方法。如果你诉诸这些黑客，你的网站将很难维护。

无论如何，这是我使用flexbox的方法。它与其他答案类似，但是：

我不会更改HTML（我假设你不能）。
我试着让它看起来像好，好像你只是HTML（而不是黑客）。

我只是隐藏父div后面的逗号，所以如果你使用不同的字体大小，你需要调整它（或者只使用em）。

＆＃13;

/* Hide the comma */
.post-meta {
  overflow: hidden;
}

.post-meta p {
  display: flex;
  flex-direction: row-reverse; /* Reverse order of elements... */
  justify-content: flex-end; /* ...and move them to the left */
  position: relative;
  left: -3px; /* Move a notch to the left so we can hide the comma */
}

/* Make up for the removed space */
p a:nth-child(1) {
  margin-left: 3px;
}

/* Hide 'Things to Do' */
p a:nth-child(3) {
  display: none;
}

＆＃13;

<div class="post-meta vcard"><p>
<a href="http://wordpress-114402-466332.cloudwaysapps.com/france/" rel="tag">France</a>, 
<a href="http://wordpress-114402-466332.cloudwaysapps.com/france/paris/" rel="tag">Paris</a>, 
<a href="http://wordpress-114402-466332.cloudwaysapps.com/france/paris/things-to-do/" rel="tag">Things to Do in Paris</a>
</p></div>

＆＃13;

Answer 4

使用flexbox
提供所有文字font-size: 0 - 这隐藏了所有内容
提供显示font-size: 1rem
将逗号重新引入为pseudoelement。

p {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  font-size: 0;
}

a:not(:last-child) {
  font-size: 1rem;
}

/* reintroduce comma */
a:first-child:before {
  content: ',';
  margin-right: .5ch;
  float: left;
  color: initial;
}

<div class="post-meta vcard">
  <p>
    <a href="http://wordpress-114402-466332.cloudwaysapps.com/france/" rel="tag">France</a>,
    <a href="http://wordpress-114402-466332.cloudwaysapps.com/france/paris/" rel="tag">Paris</a>,
    <a href="http://wordpress-114402-466332.cloudwaysapps.com/france/paris/things-to-do/" rel="tag">Things to Do in Paris</a>
  </p>
</div>

如何在CSS中反转列表的顺序，删除最后一个值，并保持居中？

4 个答案: