HTML

Question

您好，在下面的代码中我想显示如下

Welcome Guest       Free Register   Login
drop down menu
Powered by Translate

以上所有文字都没有显示右侧。

但是当我显示代码时，我的输出是这样的：

dropdown   Powered by Translate                      Welcome Guest       Free Register   Login

HTML

<div class="header">
    <div class="container">


        <div class="header-right">

        <p>&nbsp;&nbsp;Welcome Guest&nbsp;&nbsp;
         &nbsp;&nbsp;Free Register
        &nbsp;&nbsp;Login
     </p>
     <div>
     <select>
     <option>Select Language</option>
     <option>English</option>

     </select>
     <p>Powered by Google Translate</p>
      </div>
        </div>

的style.css

.logo {
  float: left;
}
.logo a {
  display: block;
}
.header {
  margin: 10px 0;
}
.header-right p {
  float: right;
  width: 42%;
  margin-right: 10px;
}

更新链接：

see my site link `olisvell.com/responsivedesign/index.html` language also i want to display right

Answer 1

关于你最后的评论（尝试编辑你的问题，如果它有所改变），你应该将你的<div id="logo">从#navigation移到.container这样改变一些CSS

.container{ direction: ltr }
.header-right, .header-right .right{ float: right }
.header-right span{ margin-left: 20px }
.clear{ clear: both }

    <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>
            <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>
        </div>
        <div class="logo">
            <a href="index.html"><img src="images/logo.gif" alt=""></a>
        </div>
    </div>
</div>

Answer 2

使用这样的结构来获得你想要的东西：

<div id="container">
    <div class="floating"></div>
    <div class="floating"></div>
    <br style="clear: both;">
</div>

并在你的CSS中：

.floating{
    float: left;
}

根据您的要求，这将为您提供三个div。将容器和浮动div的宽度调整为您想要的大小（浮动＆lt; =容器的总和）以及br标记后面的任何内容，包括。

Answer 3

如果您希望它们堆叠，只需将浮动向右移除即可。这将完全呈现它。 https://jsfiddle.net/up5e3d60/

.header-right p {
width: 42%;
margin-right: 10px;
}

Answer 4

https://jsfiddle.net/zer00ne/bjr44fq6/ 只需float所有left以及您想要并排的任何元素display: inline-block;，如果您不想要一个没有任何元素的特定元素，请使用clear: left, right, or both

HTML

    <header class='header'>
    <section class='container'>
        <nav class="header-right">
             <h1>Welcome Guest</h1>  <a href="https://nowhere.togo">Free Register</a>  <a href="https://nowhere.togo">Login</a>

        </nav>
        <select class="lang">
            <option>Select Language</option>
            <option>English</option>
        </select>
        <p class="gtran">Powered by Google Translate</p>
    </section>
</header>

CSS

       .logo {
    float: left;
}
.logo a {
    display: block;
}
.container {
    float: left;
    width: 100%;
}
.header {
    margin: 10px 0;
    float: left;
    width: 100%;
    height: auto;
}
.header-right h1 {
    float: left;
    width: 42%;
    margin-right: 10px;
    display: inline-block;
}
.header-right a {
    display: inline-block;
    float: left;
    margin: 10px;
}
.lang {
    display: block;
    float: letf;
    clear: both;
}
.gtran {
    float: float;
}

如何在html中逐个显示两个div的右侧

4 个答案:

HTML

CSS