如何反转 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。请记住，项目的实际顺序不会改变，因此当鼠标悬停在屏幕上时，最后一个子项实际上是 flexbox 中的第一个子项。

希望对您有所帮助。

.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

您需要明白这不是最好的方法。如果您诉诸这些黑客攻击，您的网站将很难维护。

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

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

我只是隐藏了父项 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>

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 中列表的顺序、删除最后一个值并保持居中？

How can I reverse the order of a list in CSS, remove the last value, and keep centered?

css

frontend

reverse

web-frontend