html에서 두 div의 오른쪽을 하나씩 표시하는 방법

케어 567

안녕하세요 아래 코드에서 이렇게 표시하고 싶습니다.

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
Pmpr

당신이 마지막 코멘트를 (당신이 조금 변경하는 경우 질문을 편집하려고), 당신이 당신을 이동해야에 대해서 <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>

    

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

표 셀 테두리의 모서리에 왼쪽 / 오른쪽 테두리 대신 위쪽 / 아래쪽 테두리 색상을 지정하는 방법

분류에서Dev

css-flex-float에서 세 개의 div를 왼쪽으로 조정하고 다른 두 개의 오른쪽을 조정하는 방법은 무엇입니까?

분류에서Dev

Python-두 개의 다른 폴더에서 파일을 하나씩 비교하는 방법

분류에서Dev

C # 숫자의 오른쪽에 2dim 배열을 표시하는 방법

분류에서Dev

동일한 div에 서로 다른 크기가 정렬 된 두 개의 수평선을 하나씩 배치하는 방법은 무엇입니까?

분류에서Dev

방정식의 오른쪽에 "forall"을 표시하여 Latex에서 방정식을 작성하는 방법

분류에서Dev

CSS : 왼쪽과 오른쪽에있는 표의 윤곽선 테두리 서식을 지정하고 제거하는 방법은 무엇입니까?

분류에서Dev

두 개의 ng-repeat를 하나씩 번갈아 표시하는 방법

분류에서Dev

하나의 div를 다른 div 안에 두는 방법

분류에서Dev

c # asp.net을 통해 메일에서 하나씩 두 개의 gridview 결과를 내보내는 방법

분류에서Dev

상단 / 하단 테두리를 왼쪽 / 오른쪽 테두리 상단에 표시하는 방법 Crossbrowser CSS

분류에서Dev

iText에서 두 개의 PDFTable을 나란히 표시하는 방법

분류에서Dev

HTML에서 두 개의 버튼을 사용하여 두 가지 양식을 표시하는 방법

분류에서Dev

중복을 제외하고 하나의 HTML 테이블에 두 개의 PHP 배열을 표시하는 방법

분류에서Dev

Swift에서 UITableView의 왼쪽 및 오른쪽 여백을 설정하는 방법

분류에서Dev

AngularJS : HTML에서 두 개의 ng-repeats로 딥 오브젝트 값을 표시하는 방법

분류에서Dev

외부 div의 하단에 두 개의 내부 div를 표시하는 방법

분류에서Dev

부트 스트랩을 사용하여 다른 DIV의 왼쪽에 DIV를 표시하는 방법

분류에서Dev

부트 스트랩을 사용하여 다른 DIV의 왼쪽에 DIV를 표시하는 방법

분류에서Dev

seleniumwebdriver에서 xml Suite를 사용하여 하나씩 여러 메서드를 사용하여 두 개의 다른 클래스를 실행하는 방법

분류에서Dev

CSS : 오른쪽에 두 개의 열을 오른쪽으로 유동적으로 만드는 방법

분류에서Dev

Dart (Dartz)의 어느 유형에서나 왼쪽 또는 오른쪽을 쉽게 추출하는 방법

분류에서Dev

TextView에서 두 개의 Spinner (하나의 활동에 있음) 값을 표시하는 방법 : Android

분류에서Dev

오른쪽에서 왼쪽으로 div에 이미지를 표시하는 방법

분류에서Dev

체크 박스에서 자바 스크립트를 사용하여 두 개의 div를 번갈아 표시하는 방법 (하나를 표시하고 같은 위치에 다른 div를 숨기는 방법)

분류에서Dev

같은 줄에 여러 줄을 포함하는 두 개의 div를 표시하는 방법

분류에서Dev

두 열 값을 빼고 Java의 다른 열에 표시하는 방법

분류에서Dev

두 개의 문자열을 나란히 표시하는 방법

분류에서Dev

HTML의 항목 배열에서 단일 행에 두 항목을 표시하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    표 셀 테두리의 모서리에 왼쪽 / 오른쪽 테두리 대신 위쪽 / 아래쪽 테두리 색상을 지정하는 방법

  2. 2

    css-flex-float에서 세 개의 div를 왼쪽으로 조정하고 다른 두 개의 오른쪽을 조정하는 방법은 무엇입니까?

  3. 3

    Python-두 개의 다른 폴더에서 파일을 하나씩 비교하는 방법

  4. 4

    C # 숫자의 오른쪽에 2dim 배열을 표시하는 방법

  5. 5

    동일한 div에 서로 다른 크기가 정렬 된 두 개의 수평선을 하나씩 배치하는 방법은 무엇입니까?

  6. 6

    방정식의 오른쪽에 "forall"을 표시하여 Latex에서 방정식을 작성하는 방법

  7. 7

    CSS : 왼쪽과 오른쪽에있는 표의 윤곽선 테두리 서식을 지정하고 제거하는 방법은 무엇입니까?

  8. 8

    두 개의 ng-repeat를 하나씩 번갈아 표시하는 방법

  9. 9

    하나의 div를 다른 div 안에 두는 방법

  10. 10

    c # asp.net을 통해 메일에서 하나씩 두 개의 gridview 결과를 내보내는 방법

  11. 11

    상단 / 하단 테두리를 왼쪽 / 오른쪽 테두리 상단에 표시하는 방법 Crossbrowser CSS

  12. 12

    iText에서 두 개의 PDFTable을 나란히 표시하는 방법

  13. 13

    HTML에서 두 개의 버튼을 사용하여 두 가지 양식을 표시하는 방법

  14. 14

    중복을 제외하고 하나의 HTML 테이블에 두 개의 PHP 배열을 표시하는 방법

  15. 15

    Swift에서 UITableView의 왼쪽 및 오른쪽 여백을 설정하는 방법

  16. 16

    AngularJS : HTML에서 두 개의 ng-repeats로 딥 오브젝트 값을 표시하는 방법

  17. 17

    외부 div의 하단에 두 개의 내부 div를 표시하는 방법

  18. 18

    부트 스트랩을 사용하여 다른 DIV의 왼쪽에 DIV를 표시하는 방법

  19. 19

    부트 스트랩을 사용하여 다른 DIV의 왼쪽에 DIV를 표시하는 방법

  20. 20

    seleniumwebdriver에서 xml Suite를 사용하여 하나씩 여러 메서드를 사용하여 두 개의 다른 클래스를 실행하는 방법

  21. 21

    CSS : 오른쪽에 두 개의 열을 오른쪽으로 유동적으로 만드는 방법

  22. 22

    Dart (Dartz)의 어느 유형에서나 왼쪽 또는 오른쪽을 쉽게 추출하는 방법

  23. 23

    TextView에서 두 개의 Spinner (하나의 활동에 있음) 값을 표시하는 방법 : Android

  24. 24

    오른쪽에서 왼쪽으로 div에 이미지를 표시하는 방법

  25. 25

    체크 박스에서 자바 스크립트를 사용하여 두 개의 div를 번갈아 표시하는 방법 (하나를 표시하고 같은 위치에 다른 div를 숨기는 방법)

  26. 26

    같은 줄에 여러 줄을 포함하는 두 개의 div를 표시하는 방법

  27. 27

    두 열 값을 빼고 Java의 다른 열에 표시하는 방법

  28. 28

    두 개의 문자열을 나란히 표시하는 방법

  29. 29

    HTML의 항목 배열에서 단일 행에 두 항목을 표시하는 방법은 무엇입니까?

뜨겁다태그

보관