[html] HTML을 변경하지 않고 같은 줄에 두 요소를 정렬하는 방법

Program / 글쓴이

동일한 줄에 두 개의 요소가 왼쪽으로 떠 있고 오른쪽으로 떠 있습니다.

<style type="text/css">
#element1 {float:left;}
#element2 {float:right;}
</style>

<div id="element1">
 element 1 markup
</div>
<div id="element2">
 element 2 markup
</div>

element2가 element1 옆에 정렬되어 둘 사이에 약 10 픽셀의 패딩이 필요합니다. 문제는 element2의 너비가 콘텐츠와 브라우저 (글꼴 크기 등)에 따라 변경 될 수 있으므로 element1과 항상 완벽하게 정렬되지 않는다는 것입니다.

마크 업도 변경할 수 없습니다.

정렬하는 균일 한 방법이 있습니까? 나는 백분율로 margin-right를 시도했고 element2를 더 가깝게 만들기 위해 element1에 음의 여백을 시도했습니다 (그러나 작동하지 못했습니다).

답변

사용 display:inline-block

#element1 {display:inline-block;margin-right:10px;}
#element2 {display:inline-block;}

예

답변

<style>
div {
    display: flex;
    justify-content: space-between;
}
</style>

<div>
    <p>Item one</p>
    <a>Item two</a>
</div>

답변

#element1 {float:left;}
#element2 {padding-left : 20px; float:left;}

바이올린 : http://jsfiddle.net/sKqZJ/

또는

#element1 {float:left;}
#element2 {margin-left : 20px;float:left;}

바이올린 : http://jsfiddle.net/sKqZJ/1/

또는

#element1 {padding-right : 20px; float:left;}
#element2 {float:left;}

바이올린 : http://jsfiddle.net/sKqZJ/2/

또는

#element1 {margin-right : 20px; float:left;}
#element2 {float:left;}

바이올린 : http://jsfiddle.net/sKqZJ/3/

참조 : CSS 여백과 패딩의 차이점

답변

사용하여 디스플레이 : 인라인 블록; 그리고 더 일반적으로 부모가있을 때 (항상 html을 제외한 부모가 있음) display: inline-block;내부 요소를 사용하십시오. 창이 축소 (축소) 된 경우에도 동일한 줄에 머물도록 강제합니다. 부모에 대해 두 가지 속성을 추가합니다. 

    white-space: nowrap;
    overflow-x: auto;

명확하게하기 위해 더 형식화 된 예제가 있습니다.

.parent {
    white-space: nowrap;
    overflow-x: auto;
}

.children {
   display: inline-block;
   margin-left: 20px;
}

이 예의 경우 특히 위의 내용을 동료로 적용 할 수 있습니다 (부모가 본문이라고 가정합니다. 올바른 부모를 넣지 않으면). 가능하면 html을 변경하고 부모를 추가하는 것도 좋아할 수 있습니다.

body { /*body may pose problem depend on you context, there is no better then have a specific parent*/
        white-space: nowrap;
        overflow-x: auto;
 }

#element1, #element2{ /*you can like put each one separately, if the margin for the first element is not wanted*/
   display: inline-block;
   margin-left: 10px;
}

마음이 유지 white-space: nowrap;하고 overlow-x: auto;당신이 한 줄에 수를 강제로 필요하다. 공백 : nowrap; 래핑을 비활성화합니다. 그리고 overlow-x : auto; 요소가 프레임 제한을 초과 할 때 스크롤을 활성화합니다.

답변

이와 같이 플로팅 요소를 사용하는 경우 일반적으로 컨테이너 요소가 항상 두 플로팅 요소의 너비와 원하는 여백이 모두 내부에 들어갈 수있을만큼 충분히 커야합니다. 이를 수행하는 가장 쉬운 방법은 두 내부 요소에 다음과 같이 외부 요소 내부에 올바르게 맞도록 고정 된 너비를 제공하는 것입니다.

#container {width: 960px;}
#element1  {float:left; width:745px; margin-right:15px;}
#element2  {float:right; width:200px;}

이것이 너비 조정 레이아웃이기 때문에 그렇게 할 수 없다면, 또 다른 옵션은 모든 차원 집합을 다음과 같은 백분율로 설정하는 것입니다.

#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:20%;}

이것은 다음과 같이 필요한 곳에서 까다로워집니다.

#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:200px;}

그런 경우, 때때로 최선의 선택은 수레를 사용하지 않고 상대 / 절대 위치를 사용하여 다음과 같은 효과를 얻는 것입니다.

#container {position:relative;} /* So IE won't bork the absolute positioning of #element2 */
#element1 {margin-right:215px;}
#element2 {display: block; position:absolute; top:0; right:0; height:100%; width:200px;}

이것은 플로팅 솔루션이 아니지만 높이가 같은 나란히 열이 생기고 하나는 유동적으로 유지되고 다른 하나는 정적 너비를 가질 수 있습니다.

답변

아래와 같이 CSS를 변경하십시오.

#element1 {float:left;margin-right:10px;}
#element2 {float:left;}

다음은 JSFiddle http://jsfiddle.net/a4aME/입니다.

답변

이것은 내가 당신과 비슷한 유형의 사용 사례에 사용한 것입니다.

<style type="text/css">
#element1 {display:inline-block; width:45%; padding:10px}
#element2 {display:inline-block; width:45%; padding:10px}
</style>

<div id="element1">
 element 1 markup
</div>
<div id="element2">
 element 2 markup
</div>

요구 사항에 따라 너비와 패딩을 조정하십시오. 참고- ‘패딩’을 추가하려면 ‘너비’를 모두 100 % (ele1_width + ele2_width)를 초과하지 말고 100 % 미만으로 유지하십시오.