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
现在让我们看一些例子来实现我们上面看到的。
通过使用自动边距和一个新的、不可见的 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>
在这个例子中,我们将使用与 T 相同宽度的伪元素。使用 ::before 将其放置在容器的开头。
让我们现在来看一个例子−
<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>
In this example, create a grid with multiple columns. Then position your items in the middle and end columns.
让我们现在来看一个例子−
<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中,将一个元素居中并将其他弹性盒子元素右/左对齐的详细内容,更多请关注php中文网其它相关文章!
已抢65036个
抢已抢27969个
抢已抢15115个
抢已抢7607个
抢已抢9494个
抢已抢19251个
抢