我在實現此布局時遇到了問題:

我需要右邊和左邊元素的寬度是自動的，并覆蓋中心元素右邊和左邊的所有空白空間。

這是我能做的最接近的事情，但是問題是中心的項目的寬度被固定為容器的12個單位中的2個，并且右邊和左邊的行被固定為各5個單位

<Grid container direction='row' alignItems='center' justify='center' style={{ width: '100%', textAlign:'center' }}>
    <Grid item xs='5'>
        <Divider />
    </Grid>
    <Grid item xs='2'>
        <span>or</span>
    </Grid>
    <Grid item xs='5'>
        <Divider />
    </Grid>
</Grid>

我正在使用material-ui reactjs庫。 有人能幫我嗎？我很樂意幫助使用材料用戶界面庫或css/js答案

您可以使用& quot自動布局& quot列，只需為需要拉伸的項目指定xs(也稱為flex-grow: 1)。不要將它設置為帶有文本的中間項，這樣它不會拉伸，并且會保留自動寬度。解決方案可以在下面的代碼片段中找到。

const { Grid, Divider } = MaterialUI;

function App() {
  return (
<Grid
  container
  direction="row"
  alignItems="center"
  justify="center"
  style={{ width: "100%", textAlign: "center" }}
>
  <Grid item xs>
    <Divider />
  </Grid>
  <Grid item>
    <span>or</span>
  </Grid>
  <Grid item xs>
    <Divider />
  </Grid>
</Grid>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<div id="app"></div>