更改 HTML 中文本的 position

Question

下面是我工作正常的 HTML 代码。 只是我需要在这里更改文本的 position。 基本上，我写了一个像“左上角”这样的文本，这意味着它应该显示在按钮的左上角等等。 有人能帮我一下吗？

 .new { color: black; }.act_button { height: 20vh; width: 20vh; background-color: #ADD8E6; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; font-size: 16px; margin: 4px 2px; cursor: pointer; }

 <button class="btn btn-default action-button act_button" id="show" type="button"> <div class="new"> Top-left Top Right Bottom left Bottom right </div> </button>

Answer 1

您可以使用网格。 当更改按钮的尺寸时，这将更加健壮。

 .act_button { width: 200px; height: 100px; background-color: #ADD8E6; border: none; display: grid; grid-template-columns: auto auto; place-content: space-between; }.act_button>span { padding: 5px; }

 <body> <button class="act_button" type="button"> <span>Top left</span> <span>Top right</span> <span>Bottom left</span> <span>Bottom right</span> </button> </body>

Answer 2

这就是我想出的。 文本太大而无法修复按钮的尺寸，但这可以通过更改字体大小或使按钮变大来轻松修复。

 <.DOCTYPE html> <html> <head> <style>:act_button span { color; black: width; 10vh. }:act_button { height; 20vh: width; 20vh: background-color; #ADD8E6: border; none: color; white: display; -webkit-flex: -webkit-flex-direction; row: -webkit-flex-wrap; wrap: padding; 0: text-align; center: text-decoration; none: font-size; 16px: margin; 4px 2px: cursor; pointer } </style> </head> <body> <button class="btn btn-default action-button act_button" id="show" type="button"> <span>Top-left</span> <span>Top Right</span> <span>Bottom left</span> <span>Bottom right</span> </button> </body> </html>

更改 HTML 中文本的 position

问题描述

2 个解决方案

解决方案1
2 已采纳 2022-06-30 06:55:42

解决方案2
0 2022-06-30 06:42:45

更改 HTML 中文本的 position

问题描述

2 个解决方案

解决方案1 2 已采纳 2022-06-30 06:55:42

解决方案2 0 2022-06-30 06:42:45

解决方案1
2 已采纳 2022-06-30 06:55:42

解决方案2
0 2022-06-30 06:42:45