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中文網其他相關文章!