将文本移动到边框内

我正在尝试将文本移动到父元素的粗边框内。我正在使用 material-ui,我的组件看起来像这样:


   <List className={classes.root}>

       <Typography className={classes.fieldLabel}>Attach PDF</Typography>

             {/***SOME CODE**/}

  </List>

2 个元素的样式(root 和 fieldLabel 类):


root: {

    width: "100%",

    maxWidth: 360,

    border: "3px solid #388FCE",

    marginLeft: "3%",

    maxHeight: 200,

    overflow: "auto",

    borderTop: "40px solid #388FCE",

    position: "relative",

  },



 fieldLabel: {

    transformOrigin: "0 0 ",

    position: "absolute",

    fontSize: "1rem",

    textTransform: "uppercase",

    letterSpacing: "3px",

    top: 0,

    left: 0,

    color: "red",

    fontWeight: "bold",

  },

我正在尝试将此 Attach PDF 标志移到边框内:

http://img3.mukewang.com/645ca5f000019a1703900219.jpg

我做错了什么所以标志还在里面而不是进入边界?



www说
浏览 138回答 3
3回答

天涯尽头无女友

没有理由将该标题放入 material-uiList元素中并强制其进入边框。只需将 包装List在一个组件中,该组件在列表之前呈现标题:const ListWithHeading = ({heading, classes, children, ...props}) => (&nbsp; &nbsp; <div className="list-container">&nbsp; &nbsp; &nbsp; &nbsp; <Typography className={classes.fieldLabel}>{heading}</Typography>&nbsp; &nbsp; &nbsp; &nbsp; <List classes={classes} {...props}>{children}</List>&nbsp; &nbsp; </div>);您可以给包含headinga 类的元素设置样式,例如给它背景颜色并使其全宽。像这样渲染它:<ListWithHeading heading="Attach PDF">&nbsp; &nbsp; {/* list items here */}</ListWithHeading>

qq_遁去的一_1

而不是试图弯曲空间和时间来向上移动文本 - 只需删除顶部边框 - 并使文本的高度和背景与内部布局相匹配。我已经使用类躲过了你的元素 - 它很简单。并且没有空间或时间的弯曲:).root {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; max-width: 360px;&nbsp; &nbsp; border: 3px solid #388FCE;&nbsp; &nbsp; margin-left: 3%;&nbsp; &nbsp; max-height: 200px;&nbsp; &nbsp; overflow: auto;&nbsp; &nbsp; border-top: none;&nbsp; &nbsp; display: block;&nbsp; }&nbsp;.fieldLabel {&nbsp; &nbsp; height: 40px;&nbsp; &nbsp; line-height: 40px;&nbsp; &nbsp; background: #388FCE;&nbsp; &nbsp; font-size: 1rem;&nbsp; &nbsp; text-transform: uppercase;&nbsp; &nbsp; letter-spacing: 3px;&nbsp; &nbsp; color: red;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; display: block;&nbsp; &nbsp; padding-left: 10px&nbsp; }<List class="root">&nbsp; &nbsp; &nbsp; &nbsp;<Typography class="fieldLabel">&nbsp; &nbsp; &nbsp; &nbsp; Attach PDF&nbsp; &nbsp; &nbsp; &nbsp;</Typography>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{/***SOME CODE**/}&nbsp; </List>

RISEBY

我会建议你使用 ListSubheader   <List       className={classes.root}       subheader={        <ListSubheader className={classes.subHeader} component="div">          Attach PDF        </ListSubheader>      }>          {/*** Your List Items**/}  </List>并为其添加样式。例如:subHeader: {  background: '#388FCE',  // other required styles}
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript