html - div/nav および画像との CSS 表示の競合

Question

設定された幅と自動マージンを使用してページの中央に配置されたナビゲーション バーの左側に表示したいロゴ画像がありますが、表示を div でインラインに設定すると、マージンが消えます。余白を維持し、画像をナビゲーション メニューとインラインで表示するために、正しい方向のポイントが必要です。ありがとう!
CSS:

#headWrapper{
    width: 850px;
    height: 430px;
    margin-left:auto;
    margin-right:auto;
    display:inline;
}
nav {
    width: 550px;
    float:right;
}

html

        <div id="headWrapper">
        <img src="images/Logo.png" id="logo">
            <nav>
              <ul>
....

Answer 1

これを回避するにはいくつかの方法があります。background-image はそのうちの 1 つです。

HTML

 <div id="headWrapper">
  <nav>
  <span class="icon"></span>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

CSS

#headWrapper {
    width: 850px;
    height: 430px;
    margin-left: auto;
    margin-right: auto;
    display: inline;
}
nav {
    width: 550px;
    float: right;
}
.icon {
    background-image: url(filelocation);
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    float: left;
}