CSS用颜色填充水平菜单栏

Posted 2023-02-16

【中文标题】CSS用颜色填充水平菜单栏

【英文标题】：CSS fill horizontal menu bar with colour

【发布时间】：2017-10-29 21:14:02

【问题描述】：

我正在使用列表创建一个水平菜单栏，但是我正在努力填充它会着色。我希望栏在“链接”右侧填充颜色。但是，仅设置整个列表的背景颜色是行不通的，因为它还会为我想保持透明的区域设置背景颜色。代码和截图如下，提前致谢！

html 代码似乎无法在预览中运行，这是一个 pastebin 链接，以防它实际损坏：https://pastebin.com/TxQV50Ey

截图：

body 
  background-image: url("../resources/background.png");
  font-family: "courier";
  color: white;
  margin: 0px;


ul 
  list-style-type: none;
  margin-top: 8px;
  padding: 0;


li 
  display: inline;
  overflow: hidden;

<ul>
  <li><img src="../resources/logo.png"  width=50px height=50px style="margin-left: 5px;"></li>
  <!--
    -->
  <li><img src="../resources/bt_IGNORE.png" width=15px height=50px></li>
  <!--
    -->
  <li><img src="../resources/bt_imageboard.png" width=150px height=50px></li>
  <!--
    -->
  <li><img src="../resources/bt_downloads.png" width=123px height=50px></li>
  <!--
    -->
  <li><img src="../resources/bt_tools.png" width=123px height=50px></li>
  <!--
    -->
  <li><img src="../resources/bt_links.png" width=123px height=50px></li>
  <!--
    -->
  <li><img src="../resources/bt_PADDING.png" width=50px height=50px style="float: right; background-color: #BBBFDC;"></li>
</ul>

【问题讨论】：

您似乎在使用../resources/ 文件，这些文件是与您所在的文件系统相关的文件。

目前还没有真正的问题，因为网站还没有启动

你可以再做一个li，然后设置它的宽度，设置背景颜色

肯定会在当前列表下方？

如果您希望整个栏都被着色，您需要将background 相关属性应用于<ul>，而不是按钮（<li>s）。

【参考方案1】：

请将背景颜色或背景图像添加到作为父元素的ul 元素，以便填充整个背景