reactjs 按钮内标记的字体大小问题< p>

tsm1rwdh 于 2023-01-04 发布在 React

关注(0)|答案(3)|浏览(140)

按钮大小不随段落按钮的字体大小而变化，请大家建议

<button style="font-size: 10px; color: white; font-weight: 500; width: auto; height: auto;" class="sc-fLcnxK dLvstt">
  <p style="font-weight: 500; color: #FFFFFF; display: block; font-family: inherit; font-size: 16px;" class="sc-fnGiBr hMZmkR">Button</p>
</button>

reactjs

来源：https://stackoverflow.com/questions/75001717/font-size-issue-with-p-tag-inside-button

3条答案

按热度按时间

iq0todco1#

你犯了一个错误，你不能像这样使用样式属性。相反，使用下面的样式属性。也不要在按钮标签内使用p标签，因为按钮标签是内联元素，而p标签是块元素。

<button style="font-size:20px; color:black; font-weight:500; width:auto; height:auto;" class="sc-fLcnxK dLvstt">
     Button</button>

赞(0）回复(0）举报 2023-01-04

31moq8wy2#

这是一些按钮的示例。我建议你使用示例按钮3，它把类和css外部化。玩它，希望这对你有帮助。

.button-3 {

  font-family: inherit; 
  font-size: 16px; color: white; 
  font-weight: 500; 
  width: auto; 
  height: auto; 
  color: red;
  padding: 5px;

}

SAMPLE #1

<button style="font-family: inherit; font-size: 16px; color: white; font-weight: 500; width: auto; height: auto; color: #FFFFFF;" class="sc-fLcnxK dLvstt">Button</button>

<br />
<br />
SAMPLE #2

<button style="font-family: inherit; font-size: 10px; color: white; font-weight: 500; width: auto; height: auto; color: #FFFFFF;" class="sc-fLcnxK dLvstt">Button</button>

<br />
<br />
SAMPLE #3

<button class="button-3">
Button
</button>

赞(0）回复(0）举报 2023-01-04

t9eec4r03#

你可以尝试内联样式css。希望这会起作用。

赞(0）回复(0）举报 2023-01-04