web-dev-qa-db-ja.com

CSS / HTMLナビゲーションとロゴを同じ行に

それらを同じ行に配置する方法がわかりません。

http://codepen.io/anon/pen/dovZdQ

<body>
    <div class="navigation-bar">
        <div id="navigation-container">
            <img src="logo.png"> 
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Get in Touch</a></li>
            </ul>
        </div>
    </div>
</body>
htmlcssnavigation
4
Денислав Ангелов

画像にlogoクラスを適用する必要があります...次にulをフロートさせます

Codepen Demo

[〜＃〜] html [〜＃〜]

<img class="logo" src="http://i.imgur.com/hCrQkJi.png">

[〜＃〜] css [〜＃〜]

.navigation-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: center;
  float: left;
  background: white;
}
0
Paulie_D

このCSSを試してください：

body {
  margin: 0;
  padding: 0;
}

.logo {
  float: left;
}
/* ~~ Top Navigation Bar ~~ */

#navigation-container {
  width: 1200px;
  margin: 0 auto;
  height: 70px;
}

.navigation-bar {
  background-color: #352d2f;
  height: 70px;
  width: 100%;
}

#navigation-container img {
  float: left;
}

#navigation-container ul {
  padding: 0px;
  margin: 0px;
  text-align: center;
  display:inline-block;
}

#navigation-container li {
  list-style-type: none;
  padding: 0px;
  height: 24px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: inline;
}

#navigation-container li a {
  color: white;
  font-size: 16px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
  line-height: 70px;
  padding: 5px 15px;
  opacity: 0.7;
}

#menu {
  float: right;
}
0
hopkins-matt