Блог

Главная - Вопросы по программированию - Установите фиксированный интервал между компонентами списка

Установите фиксированный интервал между компонентами списка

#css #reactjs #material-ui #listitem

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

Вопрос:

Я использую компонент списка пользовательского интерфейса Material в своем коде.

Вот фрагмент кода:

 <List>
    <ListItem button>
      <ListItemText
        disableTypography
        primary={<Typography>Hello</Typography>}
      />
      <p>John</p>
      <DraftsIcon />
    </ListItem>
  </List>

Вот скриншот результата:
введите описание изображения здесь

Как я могу установить фиксированное расстояние между «Привет» и «Джон»?

и избегайте следующего случая:

введите описание изображения здесь

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

1. Что вы подразумеваете под «фиксированным запасом»? Каков именно ваш желаемый внешний вид?

2. Я имел в виду фиксированное расстояние, например, могу ли я добавить ‘margin-right: 5px’ в Привет. Таким образом, расстояние между Hello и John всегда остается 5 пикселей, даже если я уменьшу размер экрана

3. Используйте StackBlitz для создания выходных данных, чтобы другие могли отлаживать.

Ответ №1:

 // just add minWidth in button 

     <List>
        <ListItem button>
          <ListItemText
            style={{minWidth:"50px" }}
            disableTypography
            primary={<Typography>Hello</Typography>}
          />
          <p>John</p>
          <DraftsIcon />
        </ListItem>
      </List>

вы также можете сделать что-то вроде этого:

 import React from 'react';
import Box from '@material-ui/core/Box';
import { IconButton, Typography } from '@material-ui/core';
import DraftsIcon from "@material-ui/icons/Drafts";

export default function FlexGrow() {
  return (
      <Box display="flex" p={1} >
        <Box p={1} flexGrow={1} >
        <Typography variant="button" display="block" gutterBottom>
          Hello
        </Typography>
        </Box>
        <Box p={1} >
        <Typography variant="button" display="block" gutterBottom>
          John
        </Typography>
        </Box>
      <IconButton color="inherit" style={{marginTop :"-10px"}}>
        <DraftsIcon/>
        </IconButton>
      </Box>
  );
}