HTML中如何实现工具栏

<nav>

<div>

role="toolbar"

<ul>

<li>

<li>

<button>

<a>

<input>

<nav class="my-toolbar" aria-label="文档编辑工具">
  <ul>
    <li><button type="button" aria-label="保存文档"><i class="icon-save"></i> 保存</button></li>
    <li><button type="button" aria-label="撤销操作"><i class="icon-undo"></i> 撤销</button></li>
    <li><a href="#help" aria-label="获取帮助"><i class="icon-help"></i> 帮助</a></li>
    <li>
      <div class="dropdown">
        <button type="button" aria-expanded="false" aria-controls="format-options">格式</button>
        <ul id="format-options" class="dropdown-menu">
          <li><button type="button">粗体</button></li>
          <li><button type="button">斜体</button></li>
        </ul>
      </div>
    </li>
    <li class="separator"></li>
    <li><input type="search" placeholder="搜索..." aria-label="搜索文档内容"></li>
  </ul>
</nav>

<ul>

display: flex

justify-content

align-items

.my-toolbar {
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
  padding: 8px 15px;
  display: flex; /* 让工具栏容器本身也能处理对齐，如果需要 */
  align-items: center;
}

.my-toolbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* 关键：使用Flexbox排列工具项 */
  gap: 10px; /* 定义工具项之间的间距 */
  align-items: center; /* 垂直居中对齐 */
}

.my-toolbar li {
  /* 针对单个工具项的样式，如果需要 */
}

.my-toolbar button,
.my-toolbar a {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
  gap: 5px; /* 图标与文字的间距 */
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.my-toolbar button:hover,
.my-toolbar a:hover {
  background-color: #e9e9e9;
  border-color: #bbb;
}

.my-toolbar .separator {
  width: 1px;
  height: 24px; /* 根据按钮高度调整 */
  background-color: #ddd;
  margin: 0 5px;
}

/* 假设 .icon-save, .icon-undo 等是图标字体或SVG */
.my-toolbar i {
  font-size: 16px;
}

document.addEventListener('DOMContentLoaded', () => {
  const toolbar = document.querySelector('.my-toolbar');

  // 示例：保存按钮点击事件
  const saveButton = toolbar.querySelector('[aria-label="保存文档"]');
  if (saveButton) {
    saveButton.addEventListener('click', () => {
      console.log('文档已保存！');
      alert('文档已保存！');
      // 这里可以加入实际的保存逻辑
    });
  }

  // 示例：下拉菜单的切换逻辑
  const dropdownButtons = toolbar.querySelectorAll('.dropdown > button');
  dropdownButtons.forEach(button => {
    button.addEventListener('click', () => {
      const dropdownMenu = document.getElementById(button.getAttribute('aria-controls'));
      const isExpanded = button.getAttribute('aria-expanded') === 'true';

      button.setAttribute('aria-expanded', !isExpanded);
      dropdownMenu.classList.toggle('active', !isExpanded); // 添加或移除active类来显示/隐藏菜单

      // 简单的点击外部关闭逻辑
      if (!isExpanded) {
        const closeDropdown = (e) => {
          if (!button.contains(e.target) && !dropdownMenu.contains(e.target)) {
            button.setAttribute('aria-expanded', 'false');
            dropdownMenu.classList.remove('active');
            document.removeEventListener('click', closeDropdown);
          }
        };
        document.addEventListener('click', closeDropdown);
      }
    });
  });

  // 示例：格式化按钮（粗体、斜体）
  const formatButtons = toolbar.querySelectorAll('#format-options button');
  formatButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      console.log(`执行格式化操作: ${btn.textContent}`);
      // 实际的文本格式化逻辑，例如对选中文本应用样式
      btn.classList.toggle('active'); // 切换激活状态
    });
  });
});

role="toolbar"

aria-label

aria-label="保存文档"

aria-expanded

aria-controls

<nav class="my-toolbar" role="toolbar" aria-label="文档编辑工具">
  <ul>
    <li><button type="button" aria-label="保存文档"><i class="icon-save"></i></button></li>
    <li><button type="button" aria-label="撤销操作"><i class="icon-undo"></i></button></li>
    <li>
      <div class="dropdown">
        <button type="button" aria-haspopup="true" aria-expanded="false" aria-controls="format-options-menu">格式</button>
        <ul id="format-options-menu" class="dropdown-menu" role="menu">
          <li role="none"><button type="button" role="menuitem">粗体</button></li>
          <li role="none"><button type="button" role="menuitem">斜体</button></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

aria-haspopup="true"

role="menuitem"

display: inline-block

.toolbar {
  display: flex;
  justify-content: flex-start; /* 默认左对齐 */
  align-items: center; /* 垂直居中 */
  gap: 10px; /* 项目间距 */
  padding: 8px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #eee;
}

.toolbar > * { /* 针对工具栏直接子元素 */
  /* 可以是一些基础样式，例如按钮的最小宽度 */
}

/* 响应式调整 */
@media (max-width: 768px) {
  .toolbar {
    flex-wrap: wrap; /* 空间不足时自动换行 */
    justify-content: center; /* 换行后居中对齐 */
  }
}

.complex-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto; /* 左侧、中间可伸缩、右侧 */
  gap: 15px;
  align-items: center;
  padding: 10px;
  background-color: #e0e0e0;
}

.toolbar-left {
  grid-column: 1;
  display: flex; /* 内部继续使用Flexbox */
  gap: 8px;
}

.toolbar-center {
  grid-column: 2;
  text-align: center; /* 居中内容 */
}

.toolbar-right {
  grid-column: 3;
  display: flex;
  gap: 8px;
}