Question

首次尝试在HTML和CSS上进行在线课程后建立网站。我在水平菜单上挣扎。

我在＆＃34;标题中有三个元素＆＃34;：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：fiddle link我希望3个元素粘在一起，它们之间没有空格，并且它们都是同一行，有足够的空间来容纳元素

Answer 1

您的CSS代码存在许多问题。例如，不明智地使用float:left和float:right，第二件事是没有这样的属性text-color: white;它应该是color: white;。

首先查看 DEMO 。这可以通过使用display:inline-block;

来实现

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;
}

Answer 2

检查这个FIDDLE：DEMO

1）我为标题添加了一个包装器，并为其指定width和margin:auto，以便菜单以width为中心（因为您希望菜单居中。）

2）并且所有菜单都在一行中具有相等的间距，这可以通过应用display:inline-block;

来完成

HTML：

<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>

CSS：

#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;
    }

如果这是您想要的，请告诉我。

Answer 3

你需要浮动所有那些内联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;
    }

Answer 4

这应该这样做。

<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>

制作网站菜单的HTML / CSS

4 个答案: