一个div中有 五个button ,包括1m 5m 30m 日K 周K;让button颜色和背景色一样,没有边框,高度5px,宽度20px, 每个按钮间隔1px,按钮中文件居中

要实现你描述的样式，你可以在样式表中添加以下样式规则：

.button-container {
  display: flex;
}

.button-container button {
  background-color: #f00; /* 按钮背景色 */
  color: #f00; /* 按钮文字颜色 */
  border: none; /* 移除边框 */
  height: 5px; /* 按钮高度 */
  width: 20px; /* 按钮宽度 */
  margin-right: 1px; /* 按钮之间的间隔 */
  display: flex;
  justify-content: center;
  align-items: center;
}

然后，在你的 Vue 模板中，使用这些样式规则：

<template>
  <div class="button-container">
    <button>1m</button>
    <button>5m</button>
    <button>30m</button>
    <button>日K</button>
    <button>周K</button>
  </div>
</template>

这样，按钮会应用上述样式，实现了按钮颜色和背景色一致、无边框、高度为 5px、宽度为 20px，按钮文字居中，并且每个按钮之间有 1px 的间隔。你可以根据需要调整颜色和其他样式属性。

相关问题

一个div中有 五个button ,包括1m 5m 30m 日K 周K; 写一个和股票网页一样的点击后有变色效果的整体

要实现点击按钮后整体变色的效果，你可以使用 Vue 的事件绑定和样式绑定来实现。首先，在你的 Vue 组件中，定义一个 data 属性来保存按钮的点击状态，例如：

data() {
  return {
    activeButton: null
  };
}

然后，在每个按钮上绑定点击事件，并在事件处理函数中更新 `activeButton` 的值，例如：

<template>
  <div>
    <button :class="{ active: activeButton === '1m' }" @click="activeButton = '1m'">1m</button>
    <button :class="{ active: activeButton === '5m' }" @click="activeButton = '5m'">5m</button>
    <button :class="{ active: activeButton === '30m' }" @click="activeButton = '30m'">30m</button>
    <button :class="{ active: activeButton === 'daily' }" @click="activeButton = 'daily'">日K</button>
    <button :class="{ active: activeButton === 'weekly' }" @click="activeButton = 'weekly'">周K</button>
  </div>
</template>

在上面的代码中，通过 `:class` 绑定语法来动态添加 `active` class，当 `activeButton` 的值与按钮的值相等时，按钮会应用这个样式。

最后，在你的样式表中定义 `.active` 类的样式，例如：

.button-container button.active {
  background-color: red;
  color: white;
}

这样，当你点击按钮时，被点击的按钮会变成红色背景和白色字体，实现了整体变色的效果。

如何使button的背景色与div背景色一样

您可以使用CSS样式表中的background-color属性来设置button和div元素的背景颜色，例如：

button {
background-color: #f2f2f2;
}

div {
background-color: #f2f2f2;
}

这将使button和div元素的背景颜色相同。