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

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>

样式.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>