html - 如何将焦点框的宽度限制为网页上文本的长度

问题描述

我在表格中有一段文字。当您单击此文本时，焦点框应尽可能靠近此文本显示。使用我的代码，显示的焦点框与表格宽度一样宽。

如何将焦点框的宽度限制为文本的长度？

注意：文本必须在该表中。

我已经尝试过：

float: left;，但随后文本不再居中。
position: absolute; left: 50%; transform: translate(-50%, 0);，但随后文本与之前的位置不完全相同（文本在获得焦点时会跳来跳去），这在 Safari 中不起作用。

这是我的代码：

<html>
  <head>
    <style type = "text/css">
      div:focus {
        outline-width: 2px;
        outline-style: dotted;
        outline-color: #ff0000;
      }
    </style>
  </head>
  <body>
    <table width = "800px" align = "center">
      <tr align = "center"> 
        <td>
          <div tabindex = "10">Click this text. The focus box should be as close as possible around this text.</div>
        </td>
      </tr>
    </table>
  </body>
</html>

标签： htmlcss

html - 如何将焦点框的宽度限制为网页上文本的长度

问题描述

解决方案

推荐阅读