第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

將文本移動(dòng)到邊框內(nèi)

將文本移動(dòng)到邊框內(nèi)

www說 2023-05-11 16:22:49
我正在嘗試將文本移動(dòng)到父元素的粗邊框內(nèi)。我正在使用 material-ui，我的組件看起來像這樣：   <List className={classes.root}>       <Typography className={classes.fieldLabel}>Attach PDF</Typography>             {/***SOME CODE**/}  </List>2 個(gè)元素的樣式（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 標(biāo)志移到邊框內(nèi)：我做錯(cuò)了什么所以標(biāo)志還在里面而不是進(jìn)入邊界？
查看完整描述

3 回答

?
天涯盡頭無女友

TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超9個(gè)贊

沒有理由將該標(biāo)題放入 material-uiList元素中并強(qiáng)制其進(jìn)入邊框。只需將 包裝List在一個(gè)組件中，該組件在列表之前呈現(xiàn)標(biāo)題：


const ListWithHeading = ({heading, classes, children, ...props}) => (

    <div className="list-container">

        <Typography className={classes.fieldLabel}>{heading}</Typography>

        <List classes={classes} {...props}>{children}</List>

    </div>

);

您可以給包含headinga 類的元素設(shè)置樣式，例如給它背景顏色并使其全寬。


像這樣渲染它：


<ListWithHeading heading="Attach PDF">

    {/* list items here */}

</ListWithHeading>


查看完整回答
反對 回復(fù) 2023-05-11
?
qq_遁去的一_1

TA貢獻(xiàn)1725條經(jīng)驗(yàn) 獲得超8個(gè)贊

而不是試圖彎曲空間和時(shí)間來向上移動(dòng)文本 - 只需刪除頂部邊框 - 并使文本的高度和背景與內(nèi)部布局相匹配。


我已經(jīng)使用類躲過了你的元素 - 它很簡單。并且沒有空間或時(shí)間的彎曲:)


.root {

    width: 100%;

    max-width: 360px;

    border: 3px solid #388FCE;

    margin-left: 3%;

    max-height: 200px;

    overflow: auto;

    border-top: none;

    display: block;

  }



 .fieldLabel {

    height: 40px;

    line-height: 40px;

    background: #388FCE;

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 3px;

    color: red;

    font-weight: bold;

    display: block;

    padding-left: 10px

  }

<List class="root">

       <Typography class="fieldLabel">

        Attach PDF

       </Typography>

             {/***SOME CODE**/}

  </List>


查看完整回答
反對 回復(fù) 2023-05-11
?
RISEBY

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超5個(gè)贊

我會(huì)建議你使用 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

}


查看完整回答
反對 回復(fù) 2023-05-11
  • 3 回答
  • 0 關(guān)注
  • 205 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號