html - 按钮html中的边框

Question

我正在尝试在按钮中添加边框，我尝试创建 2 个 div 然后执行display: inline-block但它不起作用，这是我的代码：

`#vid {
  position: absolute;
  width: 95px;
  height: 60px;
  background-color: #ffff;
  border: #ffff;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  display: inline-block;
}

#h5-vid {
  border-radius: 25px;
  background: #ffff;
  border-color: black;
  display: inline-block;
}

<button id="vid"><p>Videos</p><div id="h5-vid"><h5 id="h5-text-vid">New!</h5></button></div>`

这就是我想要得到的：

这就是我得到的：

标签： htmlcss

Answer 1

将两个带有文本的元素放在按钮内：

<button id="vid">
  <p>Videos</p>
  <h5 id="h5-text-vid">NEW</h5>
</button>

使用display: flex;justify 和 align center 按钮，然后简单地使用添加边框到h5元素border: solid 1px black;

这是一个工作片段：

#vid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 95px;
  height: 60px;
  background-color: #ffff;
  border: none;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
}

#h5-text-vid {
  border: solid 1px black;
  border-radius: 25px;
  padding: 3px;
  font-size: 6pt;
  font-weight: 800;
}

body {
  /* Just for demo */
  background-color: gray;
}

<button id="vid">
  <p>Videos</p>
  <h5 id="h5-text-vid">NEW</h5>
</button>