在用户登录的同一行上显示徽标



我已经为此苦苦挣扎了一段时间,即将认输。我试图做的是以左浮动显示徽标,并在同一行中以左浮动显示用户欢迎。而不是在不同的线上。这是我的样式表中的代码。请帮忙

header, footer, hgroup,
nav, section {
    display: block;
}
mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}
.float-left {
    float: left;
}
.float-right {
    float: right;    
}

使用

Display: inline-block;

在徽标和用户登录元素上。

你可以删除float ,使用

display:inline-block;

对于这两个元素(徽标和用户欢迎)。

没有标记就无法理解。无论如何,从我的解释来看,你需要这个。

   Markup 
  <div class="logo">
    <img class="place-left" src="http://t1.gstatic.com/images?q=tbn:ANd9GcQf2S3rAr9N1AonEHJ4MyamBQPzlz_1wledD4A0GdbNzO6Xw-Qy" />
    <div class=""> Bugatti welcomes you</div>
 </div>

  Styles
 .place-left {
        float: left;
 }
 .logo {
      height: 40px;
      width: 200px;
      position: relative;
 }
 .logo img {
       height: 40px;
       width: 40px;
 }
 .logo .message {
       position: absolute;
       left: 50px;
       top: 10px;
 }

最新更新