如何用CSS实现网页左上角链接列表横向并排显示？

Let's get that menu working the way you want it! The main issues with your current CSS are a syntax error, block-level list items that stack vertically, and a constrained width on the menu container. Here's how to adjust things step by step:

Key Issues to Fix: #

• Typo: border colour is invalid CSS (should be border-color)
• #menu li is set to display: block, which forces each item onto a new line
• #menu has a fixed width: 15% that limits horizontal space for the menu items

Modified CSS Solution #

Replace your existing #list, #menu, #menu li, and #menu a styles with this:

#list {
  /* Lock the menu to the top-left corner */
  position: absolute;
  top: 0;
  left: 0;
}

#menu {
  padding: 10px;
  margin: 0;
  /* Use flexbox to make items line up horizontally */
  display: flex;
  /* Add consistent spacing between menu items */
  gap: 8px;
  /* Remove restrictive fixed width */
  /* width: 15%; */
}

#menu li {
  list-style: none;
  /* Allow items to sit side-by-side */
  display: inline-block;
  border-width: 1px;
  border-style: outset;
  /* Fixed typo for border color */
  border-color: black;
  padding: 3px 12px;
  color: #545456;
  background: #babbc1;
  text-align: center;
}

#menu a {
  color: #545456;
  background: #babbc1;
  text-decoration: none;
  text-align: center;
  display: block;
  cursor: pointer;
}

#menu li:hover {
  border-style: inset;
}

What Changed: #

1. #list: Added position: absolute; top: 0; left: 0; to lock the menu firmly in the top-left corner (remove this if you want it to flow naturally with your page content instead).
2. #menu: Switched to display: flex for simple horizontal layout, added gap for clean spacing between items, and removed the narrow fixed width that was forcing items to stack.
3. #menu li: Fixed the border-color typo, changed display: block to display: inline-block (flex would handle this even without it), adjusted padding for better visual spacing, and removed the fixed width: 10em (add it back if you want uniform item widths).

This will make your menu links sit side-by-side in the top-left corner as desired. Tweak the gap or padding values to adjust spacing to your preference!

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