html - div右边的浮动元素出现在外面

html - div右边的浮动元素出现在外面,第1张

好吧,我回到做前端的事情 - 这真的不是我的强项 - 而且我很难过。

我有一个带徽标的div,我需要在其中放置一些文本,在div中垂直居中。每当我尝试将元素向右浮动时,它似乎最终都在div之外(不知何故?)。

相关HTML:

   <div id="wrapper-header">
  <div id="wrapper-nav-header">
    <div id="header-logo">
      <span id="header-logo-span"><a href="/"><img src="mylogo.png" /></a></span>
      <span id="header-customer-name">Customer Name</span>
    </div>
  </div>
...
</div>

相关CSS

   #wrapper-header {
  background-color: #fff;
  position: fixed;
  z-index: 999;
  width: 100%;
  padding: 0;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1
}

#wrapper-header #header-logo {
  margin-left: 20px;
  padding: 10px 0;
}

#wrapper-header #header-logo img {
  max-height: 40px;
  vertical-align: middle;
}

#wrapper-header #header-customer-name {
  vertical-align: middle;
}

我需要做些什么才能让这个header-customer-name元素正确浮动?

最佳答案:

3 个答案:

答案 0 :(得分:1)

您可以尝试使用弹性框:

&#13; &#13;
html, body{
    margin: 0;
    padding: 0;
}

#wrapper-header {
  background-color: #fff;
  position: fixed;
  z-index: 999;
  width: 100%;
  padding: 0;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1
}

#header-logo {
  margin-left: 20px;
  padding: 10px 0;
  display: flex;
  align-items: center;
}

#header-logo img {
  max-height: 40px;
  vertical-align: middle;
}

#header-customer-name {
  flex-grow: 1;
    text-align: right;
}
&#13;
 <div id="wrapper-header">
  <div id="wrapper-nav-header">
    <div id="header-logo">
      <span id="header-logo-span"><a href="/"><img src=http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" /></a></span>
      <span id="header-customer-name">Customer Name</span>
    </div>
  </div>
</div>
&#13; &#13; &#13;

或者您可以像这样计算header-customer-name的适当填充:

&#13; &#13;
html, body{
    margin: 0;
    padding: 0;
} 
#wrapper-header {
  background-color: #fff;
  position: fixed;
  z-index: 999;
  width: 100%;
  padding: 0;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1
}

#header-logo {
  margin-left: 20px;
  padding: 10px 0;
}

#header-logo img {
  max-height: 40px;
  vertical-align: middle;
}

#header-customer-name {
  float: right;
    padding: 12px 0; /*you can change for a more precise value*/
}
&#13;
 <div id="wrapper-header">
  <div id="wrapper-nav-header">
    <div id="header-logo">
      <span id="header-logo-span"><a href="/"><img src=http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" /></a></span>
      <span id="header-customer-name">Customer Name</span>
    </div>
  </div>
</div>
&#13; &#13; &#13;

无论如何,如果您提到header-customer-name正在#wrapper-header的右侧,那可能是因为它有position: fixedwidth: 100%,那么&# 39;为什么我添加风格:

html, body{
    margin: 0;
    padding: 0;
} 

在此处查看我的答案,以便更好地理解White Space Appears Right of Browser Window When at Full Screen

这与问题无关,但可以帮助你

不要资格过高

作为一般规则,请勿提供超出必要的信息。

// bad
ul#someid {..}
.menu#otherid{..}
#id1 #id2{...}

// good
#someid {..}
#otherid {..}
#id2{...}

答案 1 :(得分:0)

Try in fiddle

以这种方式改变风格..

#wrapper-header #header-customer-name {
vertical-align: middle;
float: right;
padding-top: 15px;  /*value suits to your logo */
}

答案 2 :(得分:0)

您是否在与此页面链接的CSS文件中有CSS重置代码。在低于css重置添加后,问题解决了。的 Demo

html, body {
    margin:0;
    padding:0;
}
DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
教程弟学习网站 » html - div右边的浮动元素出现在外面

0条评论

发表评论

提供最优质的资源集合

立即查看 了解详情