能否将HTML元素的ID或类作为CSS选择器？按钮布局求助

首先明确：HTML里没有button1这类标签，按钮统一用<button>元素。你混淆了HTML标签和CSS选择器的概念——标签是HTML内置的元素类型，而ID是你给元素添加的自定义标识，用来在CSS中精准选中它。

下面直接给你两种实现按钮一左一右布局的方案：

方案1：用Flex布局（现在主流推荐） #

这是最简洁高效的方式，适配各种屏幕：

HTML代码 #

<!-- 用容器包裹两个按钮，方便控制布局 -->
<div class="btn-wrapper">
  <button id="btn-left">左按钮</button>
  <button id="btn-right">右按钮</button>
</div>

CSS代码 #

/* 让容器变成flex布局容器 */
.btn-wrapper {
  display: flex;
  justify-content: space-between; /* 使子元素分别靠向容器两端 */
  width: 100%; /* 容器占满父元素宽度，才能看到左右对齐效果 */
  padding: 0 10px; /* 可选，给按钮加左右边距避免贴边 */
}

/* 用ID选择器给单个按钮加样式 */
#btn-left {
  background: #2196F3;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
}

#btn-right {
  background: #FF9800;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
}

方案2：用Float布局（适合你熟悉的旧版HTML思路） #

如果你对浮动布局更熟悉，可以用这种方式：

HTML代码 #

<div class="btn-wrapper">
  <button id="btn-left">左按钮</button>
  <button id="btn-right">右按钮</button>
</div>

CSS代码 #

.btn-wrapper {
  width: 100%;
  overflow: hidden; /* 清除浮动带来的容器高度塌陷问题 */
  padding: 0 10px;
}

#btn-left {
  float: left; /* 让按钮靠左 */
  background: #2196F3;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
}

#btn-right {
  float: right; /* 让按钮靠右 */
  background: #FF9800;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
}

你之前没找到相关内容，大概率是搜索关键词不对，不用纠结“button1”这类不存在的标签，直接搜“CSS 按钮 左右对齐”“Flex 两端对齐”这类精准关键词就能找到对应方法。

内容的提问来源于stack exchange，提问作者DAMIEN FLORES