如何使用Material-UI将主要和次要文本水平对齐，而不是垂直对齐? [英] How to align primary and secondary text horizontally and not vertically with Material-UI?

问题描述

我有此代码:

import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import ArrowForwardIos from '@material-ui/icons/ArrowForwardIos';
import ListSubheader from '@material-ui/core/ListSubheader';
import Switch from '@material-ui/core/Switch';
import TextField from '@material-ui/core/TextField';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';
import FolderIcon from '@material-ui/icons/Folder';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import DeleteIcon from '@material-ui/icons/Delete';
import IconButton from '@material-ui/core/IconButton';

function App() {
  return (
    <ListItem>
    <ListItemAvatar>
    <Avatar>
    <FolderIcon />
    </Avatar>
    </ListItemAvatar>
    <ListItemText
    primary="Single-line item"
    secondary="Secondary text"
    />
    <ListItemSecondaryAction>
    <IconButton edge="end" aria-label="delete">
    <DeleteIcon />
    </IconButton>
    </ListItemSecondaryAction>
    </ListItem>
  );
}

export default App;

单行项目"和辅助文本"在垂直方向上对齐，但是我需要在水平方向上对齐.你知道怎么做吗?

"Single-line item" and "Secondary text" is vertically aligned, but I need align it horizontally. Do you have any idea how to do it?

我需要在此处渲染右图，而不是左图:

Instead of left I need rendering on the right here:

https://gitlab.com/j4nos/tableitem/blob /master/src/App.js

如何? :)

推荐答案

我设法通过使用其他一些元素并参考了material-ui文档来获得所需的输出.这是一个工作示例: https://codesandbox.io/s/sweet-bose-4e26h

I managed to get the desired output using a few other elements and referring the material-ui documentation. here is a working example: https://codesandbox.io/s/sweet-bose-4e26h

function App() {
  return (
    <ListItem>
      <ListItemAvatar>
        <Avatar>
          <FolderIcon />
        </Avatar>
      </ListItemAvatar>
      <Box
        textAlign="right"
        style={{ paddingRight: 5 }}
      >
        Single-line item
      </Box>
      <ListItemText
        secondaryTypographyProps={{ align: "left" }}
        secondary="Secondary text"
      />
      <ListItemSecondaryAction>
        <IconButton edge="end" aria-label="delete">
          <DeleteIcon />
        </IconButton>
      </ListItemSecondaryAction>
    </ListItem>
  );
}

这篇关于如何使用Material-UI将主要和次要文本水平对齐，而不是垂直对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！