HTML을 변경하지 않고 동일한 줄에 두 요소를 정렬하는 방법

HTML을 변경하지 않고 동일한 줄에 두 요소를 정렬하는 방법

---

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

<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;} 

예

---

#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 여백과 패딩의 차이점

---

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

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

---

사용하여 디스플레이 : 인라인 블록; 그리고 더 일반적으로 부모가있을 때 (항상 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; 
}

keep in mind that white-space: nowrap; and overlow-x: auto; is what you need to force them to be in one line. white-space: nowrap; disable wrapping. And overlow-x:auto; to activate scrolling, when the element get over the frame limit.

---

In cases where I use floated elements like that, I usually need to be sure that the container element will always be big enough for the widths of both floated elements plus the desired margin to all fit inside of it. The easiest way to do that is obviously to give both inner elements fixed widths that will fit correctly inside of the outer element like this:

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

If you can't do that because this is a scaling width layout, another option is to have every set of dimensions be percentages like:

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

This gets tricky where you need something like this:

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

In cases like that, I find that sometimes the best option is to not use floats, and use relative/absolute positioning to get the same effect like this:

#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;}

While this isn't a floated solution, it does result in side by side columns where they are the same height, and one can remain fluid with while the other has a static width.

---

Change your css as below

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

Here is the JSFiddle http://jsfiddle.net/a4aME/

---

This is what I used for similar type of use case as yours.

<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>

Adjust your width and padding as per your requirement. Note - Do not exceed 'width' more than 100% altogether (ele1_width+ ele2_width) to add 'padding', keep it less than 100%.

참고URL : https://stackoverflow.com/questions/9067892/how-to-align-two-elements-on-the-same-line-without-changing-html