在HTML中，将一个元素居中并将其他弹性盒子元素右/左对齐

百变鹏仔 4周前 (09-22) #HTML

文章标签元素

Let’s say we have P, Q,R,S,T aligned in the center of a web page −

                                P Q R S T

我们希望上述内容保持不变，除了最右边的即T向右移动，像这样−

                                 P Q R S                                 T

现在让我们看一些例子来实现我们上面看到的。

Center one and right/ left align other flexbox element with auto margins

Example

的中文翻译为：

示例

通过使用自动边距和一个新的、不可见的 flex 项，可以在网页上实现上述布局 −

立即学习“前端免费学习笔记（深入）”；

<html><title>Example</title><head>   <style>      li:first-child {         margin-right: auto;         visibility: hidden;      }      li:last-child {         margin-left: auto;         background: orange;      }      ul {         padding: 0;         margin: 0;         display: flex;         flex-direction: row;         justify-content: center;         align-items: center;      }      li {         display: flex;         margin: 3px;         padding: 10px;         background: red;      }      p {         text-align: center;         margin-top: 0;      }   </style><head><body>   <ul>      <li>T</li>      <li>P</li>      <li>Q</li>      <li>R</li>      <li>S</li>      <li>T</li>   </ul></body><html>

Center one and right/ left align other flexbox element with pseudo element

在这个例子中，我们将使用与 T 相同宽度的伪元素。使用 ::before 将其放置在容器的开头。

Example

的中文翻译为：

示例

让我们现在来看一个例子−

<html><title>Example</title><head>   <style>      ul::before {         content: "T";         margin: 1px auto 1px 1px;         visibility: hidden;         padding: 5px;         background: orange;      }      li:last-child {         margin-left: auto;         background: orange;      }      ul {         padding: 0;         margin: 0;         display: flex;         flex-direction: row;         justify-content: center;         align-items: center;      }      li {         display: flex;         margin: 3px;         padding: 10px;         background: red;      }   </style><head><body>   <ul>      <li>P</li>      <li>Q</li>      <li>R</li>      <li>S</li>      <li>T</li>   </ul></body><html>

Center one and right/ left align other flexbox element with Grid Layout

In this example, create a grid with multiple columns. Then position your items in the middle and end columns.

Example

的中文翻译为：

示例

让我们现在来看一个例子−

<html><title>Example</title><head>   <style>      ul {         display: grid;         grid-template-columns: 1fr repeat(4, auto) 1fr;         grid-column-gap: 5px;         justify-items: center;      }      li:nth-child(1) {         grid-column-start: 2;      }      li:nth-child(5) {         margin-left: auto;      }      ul {         padding: 0;         margin: 0;         list-style: none;      }      li {         padding: 10px;         background: red;      }      p {         text-align: center;      }   </style><head><body>   <ul>      <li>P</li>      <li>Q</li>      <li>R</li>      <li>S</li>      <li>T</li>   </ul></body><html>

文章推荐

在HTML中，将一个元素居中并将其他弹性盒子元素右/左对齐

Center one and right/ left align other flexbox element with auto margins

Example

示例

Center one and right/ left align other flexbox element with pseudo element

Example

示例

Center one and right/ left align other flexbox element with Grid Layout

Example

示例

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8