Блог

Главная - Вопросы по программированию - Как избежать разрыва строки в типографии

Как избежать разрыва строки в типографии

#javascript #css #reactjs #material-ui

#javascript #css #reactjs #материал-пользовательский интерфейс

Вопрос:

У меня есть пользовательский интерфейс material Typography , который выдает разрыв строки, даже если там есть пробел, ниже приведен код

   <Box flexDirection="row">
  <Typography>
    Gender:
    <RadioGroup
      row
      aria-label="gender"
      name="gender1"
      value={value}
      onChange={handleChange}
    >
      <FormControlLabel value="female" control={<Radio />} label="Female" />
      <FormControlLabel value="male" control={<Radio />} label="Male" />
      <FormControlLabel value="other" control={<Radio />} label="Other" />
    </RadioGroup>
  </Typography>
</Box>

Как отобразить кнопки «Пол» и «Радио» в одной строке. Вот моя ссылка на codesandbox

Ответ №1:

Вы можете использовать сетку внутри поля

 <Box flexDirection="row" >
      <Grid container direction="row"
      justify="space-evenly"
       alignItems="center">
         <Grid item>
           <Typography>
             Gender:
           </Typography>
         </Grid>
         <Grid item>
           <RadioGroup
              row
              aria-label="gender"
              name="gender1"
              value={value}
              onChange={handleChange}> 
             <FormControlLabel value="female" control={<Radio />} label="Female" />
             <FormControlLabel value="male" control={<Radio />} label="Male" />
             <FormControlLabel value="other" control={<Radio />} label="Other" />
           </RadioGroup>
         </Grid>
        </Grid>          
    </Box>

ссылка на codesandbox

Комментарии:

1. Спасибо, всего один запрос, как избавиться от этого дополнительного пробела между кнопками «Пол» и «Переключатель»

2. Вы можете заменить justify=»пробел-равномерно» на spacing={2}