如何在html中将徽标移到顶部

时间:2015-07-12 13:19:10

标签: html css

您好,在以下网站http://olisvell.com/responsivedesign/index.html徽标中,我想转到顶部。 我的日志显示有点下来我想要移到顶部。上面有一个是我的网站link.thing工作正常除了徽标

每 任何人都可以帮助我

HTML

<div class="header">
        <div class="container">
            <div class="header-right">
                <p class="right">Welcome Guest<span>Free Register</span><span>Login</span></p>
                <div class="clear"></div>
                  <br>
                <select class="right">
                    <option>Select Language</option>
                    <option>English</option>
                </select>
<br>
                <div class="clear"></div>
<br>
                <p class="right">Powered by Google Translate</p>
                <div class="clear"></div>
            </div>
        </div>
    </div>


<!-- //header -->
<!-- navigation -->
<div class="navigation">
    <div class="container">
        <nav class="navbar navbar-default">

            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>


<div class="logo">
            <a href="index.html"><img src="images/logo.gif" alt=""/></a>

    </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
                <li><a href="index.html">About Us</a></li>
                <li><a href="index.html">Services</a></li>
                <li><a href="index.html">Treatments</a></li>


                <li><a href="index.html">Partners</a></li>
                <li><a href="index.html">Visa Help</a></li>
                <li><a href="index.html">FAQ</a></li>
                <li><a href="index.html">Contact Us</a></li>
              </ul>

              <div class="clearfix"></div>
            </div><!-- /.navbar-collapse -->
        </nav>
    </div>
</div>

的style.css

   .logo {
      float: left;
    }
    .logo a {
      display: inline-block;
    }
    .header {
      margin: 10px 0;
    }
    .container{ direction: ltr }
    .header-right .right{ float: right }
    .header-right .right span{ margin-left: 20px }
    .clear{ clear: both }
    .nav-wil{

float: right;
margin-top:10px;

}

3 个答案:

答案 0 :(得分:1)

这可能对你有所帮助:

UIPickerViewDataSource

和调整好的html(别忘了再删除你的徽标)

<style>
    .header-left
    {
        float: left;
    }
    .header-right
    {
        float: right;
    }
</style>

答案 1 :(得分:1)

&#13;
&#13;
.logo {
    float: left;
}
.header {
    margin: 10px 0;
}
.container{ direction: ltr }
.header-right, .header-right .right{ float: right }
.header-right .right span{ margin-left: 20px }
.clear{ clear: both }
.navbar-nav {
    float: right;
    margin: 0;
    padding: 11px 0;
    list-style: none;
}
.navbar-nav > li {
    float: left;
}
&#13;
<div class="header">
    <div class="container">
        <div class="logo">
            <a href="index.html"><img src="http://olisvell.com/responsivedesign/images/logo.gif" alt=""/></a>
        </div>
        <div class="header-right">
            <p class="right">Welcome Guest<span>Free Register</span><span>Login</span></p>
            <div class="clear"></div>
            <select class="right">
                <option>Select Language</option>
                <option>English</option>
            </select>
            <div class="clear"></div>
            <p class="right">Powered by Google Translate</p>
            <div class="clear"></div>
            <nav class="navbar navbar-default right">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
                    <li><a href="index.html">About Us</a></li>
                    <li><a href="index.html">Services</a></li>
                    <li><a href="index.html">Treatments</a></li>
                    <li><a href="index.html">Partners</a></li>
                    <li><a href="index.html">Visa Help</a></li>
                    <li><a href="index.html">FAQ</a></li>
                    <li><a href="index.html">Contact Us</a></li>
                  </ul>
                  <div class="clearfix"></div>
                </div><!-- /.navbar-collapse -->
            </nav>
            <div class="clear"></div>
        </div>
    </div>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

试试这个: 示例:<img style="position:absolute; top:0px;" src=logo.png> 非常简单,这会将您的徽标/图像移动到最顶端。