关于制作网站菜单的HTML/CSS

在一个关于HTML和CSS的在线课程之后，第一次尝试建立一个网站。我正在努力处理水平菜单

“标题”中有三个元素：img1；img2；ul/li元素

我想让它们粘在一起，所以我左边有一个标志，中间有一个三角形，右边有一个菜单，都粘在一起，没有空间和中心。

你能帮我吗

以下是CSS：

* {
border: 1px solid white;
background-color:#000;
color: white;
}
#header {
border: 1px solid blue;
height: 60px;
}
#logo {
float: left
}
#logo img {
display:inline-block;
width: 300px;
height: 50px;
}
#triangulo {
display:inline-block;
}
#triangulo img {
display:inline-block;
width: 50px;
height: 50px;
}
#menu { 
display:inline-block;
border: 1px solid pink;
float: right
}
#menu li {
display: inline-block;
text-color: white;
font-weight: bold;
font-family: Arial;
}

非常感谢你的耐心

编辑：html

    <div id="header">
    <div id="logo"><img src="images/Olympic-logo.png" width=300 height=50 /></div>
    <div id="triangulo"><img src="images/Triangle(shape).jpg" width=50 height=50  /></div>
    <div id="menu">
    <ul>
      <li><a href="#">Quem Somos</a></li>
      <li><a href="#">Soluções</a></li>
      <li><a href="#">Instalações</a></li>
      <li><a href="#">Contactos</a></li>
      <li><a href="#">X</a></li>
      <li><a href="#">X</a></li>

    </ul>
   </div>
   </div>

---

edit2：我希望3个元素粘在一起，它们之间没有空格，并使其成为同一行，有足够的空间容纳li/ul元素

您需要将所有内联div向左浮动

#header {
    border: 1px solid blue;
    height: 60px;
    margin:0 auto 0 auto;
}
#logo {
    float: left;
}
#triangulo {
    display:inline-block;
    float:left;
}
#menu { 
    display:inline-block;
    border: 1px solid pink;
    float:left;
    height: 50px;
    width: 400px;
}
#menu li {
    display: inline-block;
    color: white;
    font-weight: bold;
    font-family: Arial;
    }

这应该可以做到

<style>
* {
border: 1px solid white;
background-color:#000;
color: white;
}
#header {
  border: 1px solid blue;
  height: 60px;
}
#logo {
  display:inline-block;
  padding:0px;
  margin:0px;
  width: 300px;
  height: 50px;
  float:left;
}
#triangulo {
  display:inline-block;
  width: 50px;
  height: 50px;
  padding:0px;
  margin:0px;
  float:left;
}
#menu { 
  display:inline-block;
  border: 1px solid pink;
  float:left;
}
#menu ul {
  float:left;
  padding:0px;
  margin:0px
}
#menu li {
  display: inline-block;
  text-color: white;
  font-weight: bold;
  font-family: Arial;
}

</style>

<div id="header">
    <img id="logo" src="images/Olympic-logo.png" width=300 height=50 />
    <img id="triangulo" src="images/Triangle(shape).jpg" width=50 height=50 >
    <div id="menu">
    <ul>
      <li><a href="#">Quem Somos</a></li>
      <li><a href="#">Soluções</a></li>
      <li><a href="#">Instalações</a></li>
      <li><a href="#">Contactos</a></li>
      <li><a href="#">X</a></li>
      <li><a href="#">X</a></li>

    </ul>
   </div>
   </div>

* {
边框：1px纯白；
背景色：#000；
颜色：白色；
}
#标题{
边框：1px纯蓝色；
高度：60px；
}
#标志{
显示：内联块；
填充：0px；
边际：0px；
宽度：300px；
高度：50px；
浮动：左；
}
#三角{
显示：内联块；
宽度：50px；
高度：50px；
填充：0px；
边际：0px；
浮动：左；
}
#菜单{
显示：内联块；
边框：1px纯红；
浮动：左；
}
#菜单ul{
浮动：左；
填充：0px；
保证金：0px
}
#菜单里{
显示：内联块；
文字颜色：白色；
字体大小：粗体；
字体系列：Arial；
}

您的CSS代码有很多问题。例如，不明智地使用

float:left

和

float:right

第二件事是没有这样的属性

文本颜色：白色应为
颜色：白色

首先看一下。这是通过使用
display:inline块实现的

CSS代码：

ul{margin:0; padding:0; vertical-align:top; list-style-type:none;}
#header {
  white-space:nowrap;
   border:1px solid #c6c6c6;
}
#logo {
    display:inline-block;
}
#triangulo {
    display:inline-block;
}
#menu { 
    display:inline-block;
    border: 1px solid pink;
}
#menu ul li ,#menu ul li a
{
    color: black;
    font-weight: bold;
    font-family: Arial;
    display:inline-block;
  text-decoration:none;
}

检查这把小提琴：

1） 我为标题添加了一个包装器，并赋予它
宽度
和
边距：auto
，以便菜单居中于
宽度
（因为您希望菜单居中）

2） 所有菜单都在一行中，间距相等，这是通过应用
display:inline block实现的

HTML:

如果这是您想要的，请告诉我。
所以。。。你有CSS，你正在寻找能让它工作的HTML？或者你两者都有，结果却不是你所期望的？这里的实际问题是什么？请发布你的html。你可以修改一下你的html和css并发布吗？。这将更容易看到问题。我把它传送给Fiddle非常感谢，你做到了。你能详细说明一下为什么你做到了吗？谢谢，非常好！欢迎光临。请更改“文本颜色”，如Kheema Pandey所述。
<div id="header-wrapper">
    <div id="header">
    <div id="logo"><img src="images/Olympic-logo.png" width=300 height=50 /></div>
    <div id="triangulo"><img src="images/Triangle(shape).jpg" width=50 height=50  /></div>
<div id="menu">
    <ul>
      <li><a href="#">Quem Somos</a></li>
      <li><a href="#">Soluções</a></li>
      <li><a href="#">Instalações</a></li>
      <li><a href="#">Contactos</a></li>
      <li><a href="#">X</a></li>
      <li><a href="#">X</a></li>

    </ul>
  </div>
</div>
</div>

#header-wrapper{
 width:800px;
    margin:0 auto;
}
}
#header {
    border: 1px solid blue;
    height: 60px;
}
#logo {
    display:inline-block;
}
#triangulo {
    display:inline-block;
}
#menu { 
    display:inline-block;
    border: 1px solid pink;

    height: 50px;
    width: 400px;
}
#menu li {
    display: inline-block;
    color: white;
    font-weight: bold;
    font-family: Arial;
    }