CSS Flex页脚有3个项目，2个在开始，最后一个完全居中[重复]答案

【问题标题】：CSS Flex footer with 3 items, 2 at the start and the last one perfectly centered [duplicate]CSS Flex页脚有3个项目，2个在开始，最后一个完全居中[重复]
【发布时间】：2019-03-04 05:11:48
【问题描述】：

我正在尝试使用CSS flex 创建一个footer，条件如下：

3 个元素（链接）
前 2 个必须在屏幕左侧
最后一个必须完全居中

直播sn-p

* {
    box-sizing: border-box;
    text-decoration: none;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    width: 100%;
    height: 100%;
    display: flex;
    flex: 1;
}

footer {
    background: black;
}

a {
    color: inherit;
}

ul {
    margin: 0;
    display: flex;
    height: 66px;
    list-style: none;
    align-items: center;
    justify-content: center;
}



li {
    flex: 1;
    color: white;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

li div {
    padding: 1em;
}

li.centered {
    justify-content: center;
}

li.centered div {
    background: lightgrey;
    color: black;
    height: 100%;
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
    <main></main>
    <footer>
        <ul>
            <li>
                <div>
                    <a href="http://google.fr">First</a>
                </div>
                <div>
                    <a href="http://google.fr">Second, large, full of text element</a>
                </div>
            </li>
            <li class="centered">
                <div>
                    <a href="http://google.fr">Centered element</a>
                </div>
            </li>
            <li></li>
        </ul>
    </footer>
</body>
</html>

这工作正常，但我不喜欢最后一个空 li 元素（用于添加第三列）。

有没有人对此有解决方案，在 dom 中没有空元素？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

这工作正常，但我不喜欢最后一个空的 li 元素（用于添加第三列）。

有没有人对此有解决方案，在 dom 中没有空元素？

您可以轻松地将其替换为伪元素 (ul:after) - 您只需要确保将 li 的样式也应用于该元素即可。

* {
    box-sizing: border-box;
    text-decoration: none;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    background: black;
}

a {
    color: inherit;
}

ul {
    margin: 0;
    display: flex;
    height: 66px;
    list-style: none;
    align-items: center;
    justify-content: center;
}

/* pseudo element to replace empty LI at the end */
ul:after {
  content: ""; /* content property needs to be set, otherwise pseudo element is not rendered at all */
}
/* apply general LI formatting for pseudo element as well */
li, ul:after {
    flex: 1;
    color: white;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

li div {
    padding: 1em;
}

li.centered {
    justify-content: center;
}

li.centered div {
    background: lightgrey;
    color: black;
    height: 100%;
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

<footer>
        <ul>
            <li>
                <div>
                    <a href="http://google.fr">First</a>
                </div>
                <div>
                    <a href="http://google.fr">Second, large, full of text element</a>
                </div>
            </li>
            <li class="centered">
                <div>
                    <a href="http://google.fr">Centered element</a>
                </div>
            </li>
        </ul>
    </footer>

【讨论】：

【解决方案2】：

您可以通过以下方式实现：

li.centered div {
    position: relative;
    left: 0;
    right: 0;
    transform: translateX(-50%);
}

我知道这不是最现代的解决方案，我没有使用 flexbox，但您不需要以这种方式创建空元素。

【讨论】：