Cách căn chỉnh hai phần tử trên cùng một dòng mà không thay đổi HTML

Tôi có hai phần tử trên cùng một dòng trôi nổi bên trái và nổi bên phải.

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

Tôi cần phần tử2 xếp hàng bên cạnh phần tử1 với khoảng 10 pixel đệm giữa hai phần tử. Vấn đề là chiều rộng của element2 có thể thay đổi tùy thuộc vào nội dung và trình duyệt (kích thước phông chữ, v.v.) vì vậy nó không phải lúc nào cũng được sắp xếp hoàn hảo với element1 (tôi không thể chỉ áp dụng lề phải và di chuyển nó qua).

Tôi cũng không thể thay đổi đánh dấu.

Có cách nào thống nhất để xếp chúng không? Tôi đã thử đặt lề phải với một tỷ lệ phần trăm, tôi đã thử đặt lề âm trên phần tử1 để đưa phần tử2 đến gần hơn (nhưng không thể làm cho nó hoạt động).

Sử dụng display:inline-block

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

Thí dụ

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

fiddle: http://jsfiddle.net/sKqZJ/

hoặc là

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

fiddle: http://jsfiddle.net/sKqZJ/1/

hoặc là

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

fiddle: http://jsfiddle.net/sKqZJ/2/

hoặc là

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

fiddle: http://jsfiddle.net/sKqZJ/3/

tham khảo: Sự khác biệt giữa Lề CSS và Phần đệm

Bằng cách sử dụng display: inline-block; Và thông thường hơn khi bạn có cha mẹ (luôn có cha mẹ ngoại trừ html) sử dụng display: inline-block;cho các phần tử bên trong. và buộc chúng phải ở trên cùng một dòng ngay cả khi cửa sổ bị thu hẹp (bị co lại). Thêm cho cha mẹ hai thuộc tính:

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

đây là một ví dụ có định dạng khác để làm rõ hơn:

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

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

Đặc biệt, đối với ví dụ này, bạn có thể áp dụng phần trên với tư cách là đồng nghiệp (tôi cho rằng phụ huynh là nội dung.

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

hãy ghi nhớ điều đó white-space: nowrap;và overlow-x: auto;là những gì bạn cần để buộc họ phải ở trong một dòng. khoảng trắng: nowrap; vô hiệu hóa gói. Và overlow-x: auto; để kích hoạt tính năng cuộn, khi phần tử vượt quá giới hạn khung hình.

Trong trường hợp tôi sử dụng các phần tử nổi như vậy, tôi thường cần đảm bảo rằng phần tử vùng chứa sẽ luôn đủ lớn cho chiều rộng của cả hai phần tử nổi cộng với lề mong muốn để tất cả vừa với bên trong của nó. Cách dễ nhất để làm điều đó rõ ràng là cung cấp cho cả hai phần tử bên trong chiều rộng cố định sẽ phù hợp chính xác bên trong phần tử bên ngoài như sau:

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

Nếu bạn không thể làm điều đó vì đây là bố cục chiều rộng theo tỷ lệ, thì một tùy chọn khác là đặt mọi kích thước đều là tỷ lệ phần trăm như:

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

Điều này trở nên phức tạp khi bạn cần một cái gì đó như thế này:

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

Trong những trường hợp như vậy, tôi thấy rằng đôi khi lựa chọn tốt nhất là không sử dụng float và sử dụng định vị tương đối / tuyệt đối để có được hiệu quả tương tự như sau:

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

Mặc dù đây không phải là một giải pháp thả nổi, nhưng nó dẫn đến các cột cạnh nhau mà chúng có cùng chiều cao và một cột có thể vẫn linh hoạt trong khi cột kia có chiều rộng tĩnh.

Thay đổi css của bạn như bên dưới

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

Đây là JSFiddle http://jsfiddle.net/a4aME/

Đây là những gì tôi đã sử dụng cho loại trường hợp sử dụng tương tự như của bạn.

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

Điều chỉnh chiều rộng và đệm theo yêu cầu của bạn. Lưu ý - Không vượt quá 'width' hoàn toàn hơn 100% (ele1_width + ele2_width) để thêm "padding", giữ cho nó nhỏ hơn 100%.