html과 css에서 탭을 오른쪽으로 정렬

아래의 코드에서 탭을 오른쪽으로 정렬하려고합니다 (브라우저 재설정 기본 설정을 지우기 위해 CSS 재설정을 추가했습니다). 나는 float : "right"를 .tabs li에 추가했습니다. 성공하지 못했습니다. 누군가이 일을하는 가장 좋은 방법은 무엇인지 설명 할 수 있습니까?html과 css에서 탭을 오른쪽으로 정렬

감사

body { 
 
    margin-top: 100px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    line-height: 1.6; 
 
} 
 
.container { 
 
    width: 800px; 
 
    margin: 0 auto; 
 
} 
 

 
.tabs li { 
 
    color: #222; 
 
    display: inline-block; 
 
    padding: 10px 15px; 
 
    cursor: pointer; 
 
} 
 

 
.tabs .current { 
 
    background: #ededed; 
 
    color: #000; 
 
} 
 

 
.tab-content { 
 
    display: none; 
 
    background: #ededed; 
 
    padding: 15px; 
 
} 
 

 
.tab-content.current { 
 
    display: inherit; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 

 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
 

 
</head> 
 
<body> 
 
<div class="container"> 
 
    <ul class="tabs"> 
 
     <li class="tab-link current" data-tab="tab-1">Tab One</li> 
 
     <li class="tab-link" data-tab="tab-2">Tab Two</li> 
 
    </ul> 
 

 
    <div id="tab-1" class="tab-content current"> 
 
     contents for tab-1 
 
    </div> 
 
    <div id="tab-2" class="tab-content"> 
 
     contents for tab-2 
 
    </div> 
 
</div><!-- container --> 
 

 
</body> 
 
</html>

출처

2015-01-22 user3355028

이 트릭을 할 것입니다 text-align:right.tabs에 추가합니다.

body { 
 
    margin-top: 100px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    line-height: 1.6; 
 
} 
 
.container { 
 
    width: 800px; 
 
    margin: 0 auto; 
 
} 
 

 
.tabs { 
 
    padding: 0; 
 
    text-align:right; 
 
} 
 

 
.tabs li { 
 
    color: #222; 
 
    display: inline-block; 
 
    padding: 10px 15px; 
 
    cursor: pointer; 
 
} 
 

 
.tabs .current { 
 
    background: #ededed; 
 
    color: #000; 
 
} 
 

 
.tab-content { 
 
    display: none; 
 
    background: #ededed; 
 
    padding: 15px; 
 
} 
 

 
.tab-content.current { 
 
    display: inherit; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 

 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
 

 
</head> 
 
<body> 
 
<div class="container"> 
 
    <ul class="tabs"> 
 
     <li class="tab-link current" data-tab="tab-1">Tab One</li> 
 
     <li class="tab-link" data-tab="tab-2">Tab Two</li> 
 
    </ul> 
 

 
    <div id="tab-1" class="tab-content current"> 
 
     contents for tab-1 
 
    </div> 
 
    <div id="tab-2" class="tab-content"> 
 
     contents for tab-2 
 
    </div> 
 
</div><!-- container --> 
 

 
</body> 
 
</html>

당신은 몇 가지를 할 필요가

출처

2015-01-22 09:05:13 Prachit

감사합니다! 위대한 작품 – user3355028

<ul> 요소는 40px 패딩의 기본이있다. 그냥 0으로 재설정 :

body { 
 
    margin-top: 100px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    line-height: 1.6; 
 
} 
 
.container { 
 
    width: 800px; 
 
    margin: 0 auto; 
 
} 
 

 
.tabs { 
 
    padding: 0; 
 
} 
 

 
.tabs li { 
 
    color: #222; 
 
    display: inline-block; 
 
    padding: 10px 15px; 
 
    cursor: pointer; 
 
} 
 

 
.tabs .current { 
 
    background: #ededed; 
 
    color: #000; 
 
} 
 

 
.tab-content { 
 
    display: none; 
 
    background: #ededed; 
 
    padding: 15px; 
 
} 
 

 
.tab-content.current { 
 
    display: inherit; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 

 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
 

 
</head> 
 
<body> 
 
<div class="container"> 
 
    <ul class="tabs"> 
 
     <li class="tab-link current" data-tab="tab-1">Tab One</li> 
 
     <li class="tab-link" data-tab="tab-2">Tab Two</li> 
 
    </ul> 
 

 
    <div id="tab-1" class="tab-content current"> 
 
     contents for tab-1 
 
    </div> 
 
    <div id="tab-2" class="tab-content"> 
 
     contents for tab-2 
 
    </div> 
 
</div><!-- container --> 
 

 
</body> 
 
</html>

출처

2015-01-22 08:53:52

먼저 다른 사업부에 UL을 넣고 주요 컨테이너가 이미 하나 개 이상의 사업부를 그 중 하나가되어 있기 때문에 다음 마우스 오른쪽 탭의 컨테이너에 플로트를 배치 바로 그 clearfix를 사용하는 데 필요한 float를 <br style="clear:both" />

바이올린 함께

전체 코드는 여기 http://jsfiddle.net/yvokgbgb/1/

출처

2015-01-22 09:17:24 squiroid

html과 css에서 탭을 오른쪽으로 정렬

답변

관련 문제