Блог

Я пытаюсь обновить панель инструментов на веб-сайте, который я создаю, и я изо всех сил пытаюсь создать панель инструментов, которая позиционирует вещи там, где я их хочу. Я хочу, чтобы название и логотип сайта находились в левой части панели инструментов, в то время как кнопки входа / регистрации закреплены на правой стороне. До сих пор мне удавалось размещать логотип и заголовок там, где я хочу, но каждый раз, когда я пытаюсь добавить кнопки, выровненные по правому краю, они просто располагаются рядом с концом заголовка / логотипа. Вот мой код:

 function Header() {

  return (
    <ThemeProvider theme={theme}>
      <AppBar position="static">
        <Toolbar>
          <MenuItem edge="start">
            <Link to="/" style={{textDecoration:"none", color:"black"}}>
              <Typography variant="h3">
                <strong>Test</strong>Value
                <img style={{width: 60, height: 'auto', verticalAlign: 'middle'}} src='/png/SQUID.png' alt="Squiddy :)"/>
              </Typography>
            </Link>
          </MenuItem>
          <MenuItem>
            <Link to={"/"} style={{ textDecoration: 'none' }}>
              <Button type="button" variant="outlined" color="secondary" float="right">Log-in</Button>
            </Link>
            <Link to={"/"} style={{ textDecoration: 'none' }}>
              <Button type="button" variant="contained" color="secondary" float="right">Register</Button>
            </Link>
          </MenuItem>
        </Toolbar>
      </AppBar>
    </ThemeProvider>
  );
}
  

Я пытался использовать flexGrow в соответствии с примерами в документах material-ui, я рассматривал возможность использования grid элемента, но на самом деле я не хочу беспокоиться о расстоянии между заголовком и кнопками, я просто хочу иметь возможность выравнивать элементы как по левому, так и по правому полям, чтобы их положение соответствовало независимо от размера экрана, на котором они просматриваются, они остаются в одном и том же положении относительно каждого поля.

Любая помощь будет высоко оценена.

 function Header() {

    return (
      <ThemeProvider theme={theme}>
        <AppBar position="static">
          <Toolbar style={{display:"flex", justifyContent:"space-between"}}>
              <div>
            <MenuItem edge="start">
              <Link to="/" style={{textDecoration:"none", color:"black"}}>
                <Typography variant="h3">
                  <strong>Test</strong>Value
                  <img style={{width: 60, height: 'auto', verticalAlign: 'middle'}} src='/png/SQUID.png' alt="Squiddy :)"/>
                </Typography>
              </Link>
            </MenuItem>
            </div>
            <div>
            <MenuItem>
              <Link to={"/"} style={{ textDecoration: 'none' }}>
                <Button type="button" variant="outlined" color="secondary" float="right">Log-in</Button>
              </Link>
              <Link to={"/"} style={{ textDecoration: 'none' }}>
                <Button type="button" variant="contained" color="secondary" float="right">Register</Button>
              </Link>
            </MenuItem>
            </div>
          </Toolbar>
        </AppBar>
      </ThemeProvider>
    );
  }
  

Шаги:

1. Оберните обе группы (объекты слева и объекты справа) в divs.

2. Добавить к содержащему их элементу (то есть панели инструментов):

 display:flex;
justify-content:space-between;
align-items:center; // if you want to center both divs vertically, if they're of different height
  

3. Поскольку я предполагаю, что вы хотите, чтобы кнопки справа были горизонтальными, добавьте это в правый div (не требуется, если у вас нет блочных элементов в правой группе; ссылки встроены по умолчанию):

 display:flex;
align-items: center //vertical center
  

Кроме того, убедитесь, что панель инструментов охватывает всю предполагаемую ширину, но я думаю, что это поведение панели инструментов MaterialUI по умолчанию.

Ответ на комментарий

Если вы хотите, чтобы кнопки в правой группе имели некоторый интервал, применение отступов является самым простым решением. Вы можете либо применить заполнение отдельно к каждому элементу (я не знаю, есть ли у вас там только кнопки), чтобы иметь некоторый мелкозернистый контроль.

Или, если вы хотите создать равные промежутки между всеми элементами справа:

 .right-div > *   * {
padding-left: 20px;
padding-top: 20px; // use this one if you're stacking your buttons vertically
}
  

В приведенном выше примере используется каждый элемент правой группы, ЗА ИСКЛЮЧЕНИЕМ первого, и к нему применяется заполнение левой стороны, поэтому создается только интервал между элементами. Конечно, вы все равно можете переопределить заполнение позже для определенных элементов.

Помните, что вам придется каким-то образом применять эти стили, я предполагал, что вы добавите класс «right-div» к правому div.

Если вы используете решение для стилизации MUI вместо чистого css, это будет выглядеть примерно так:

 makeStyles({
    rightDiv:{
        "amp; > *   *":{
            paddingLeft:"20px"
        }
    }
})
  

С styled-components :

 const RightDiv = styled.div`
amp; > *   * {
   paddingLeft:"20px"
}
`