Question

我正在尝试将我的网站徽标添加到标题的左侧部分，将右侧的按钮添加到同一个div中的标签。我已经尝试设置一个外部div，并使用内联块语句设置内部div，但由于某种原因它似乎不起作用。这是html：

<section class="header">
        <div class="container">
        <div class="row">
             <div class="logo float-left">
                      <div class="signup">
                    <a href="#top">
                    <img src="” alt=""/> //LOGO
                    </a>
                               </div>
                </div>
            </div>
        </div>
        </section>

这是CSS：

.header {
    background: #ffffff;
    width: 100%;
    height: 120px;

}
.header .container {
    padding: 0px;
}

.logo {
    padding-top:0px;
    float:left;
}

.signup{

      padding-top:0px;
      float:right;  

}

Answer 1

让我们保持简单。使用HTML5？也可以使用标头标签将它们包装在一起。

为图像提供ID，因为徽标将是唯一的。注册块是一个div，但它会成为一个表单吗？我们给它一个唯一的ID。

HTML

<header>
    <img src="" alt="Logo" id="logo" />
        <div id="signup">
            <a href="#">Whatever</a>
        </div>
</header>

<div id="content">

</div>

身体居中只是为了在大屏幕上轻松实现可视化。让我们将徽标浮动到左侧。无需将其包装在div中。注册块浮动到右侧。最后，包含您的内容的div将清除浮动。

CSS

body {
  width:800px;
  margin:0 auto
}

header {
  overflow:hidden;
  height:100px;
  background:#0C6
}

/*The overflow allows for the height to be maintained for a background or whatever... */
img#logo {
  width:100px;
  height:50px;
  background:red;
  float:left
}

#signup {
  float:right
}

#content {
  clear:both
}

Answer 2

FIDDLE

保持真的非常简单

HTML

<header class="global-header">

<img class="logo" src="http://placehold.it/100x100" alt="logo" />    

<div class="signup">
    <a href="#">
        Sign-up
    </a>
</div>

CSS

.global-header {
    overflow: hidden; /* this should be clear-fixed instead */
}

.logo {
    display: block; /* get rid of the lame space beneith by default as well as to let it be floated */
    float:left;
}

.signup {
    float: right;
}

添加“内嵌块”按钮，图像向右浮动

2 个答案:

HTML

CSS