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

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

希望这会有所帮助。

.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;
}

<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>

Answer 2

我敢这样做：

p {
  direction: rtl;
  color: transparent;
}

p a {
  display: inline-block;
}

p a:nth-child(3) {
  display: none;
}

<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>

这是codepen。

Answer 3

1. 颠倒链接的顺序并使用 flexbox 将所有内容居中
2. 提供所有文字font-size: 0 - 这会隐藏所有内容
3. 提供链接以显示font-size: 1rem
4. 将逗号重新引入为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>

Answer 4

您需要了解这不是最好的方法。如果您采用这些黑客手段，您的网站将难以维护。

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

1. 我不会更改 HTML（我假设你不能）。
2. 我试图让它看起来好，就好像你只是 HTML（而不是 hack）。

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

/* 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;
}

<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>