如何在不更改 HTML 的情况下将两个元素对齐在同一行

发布于 2025-01-01 11:56:31 字数 528 浏览 2 评论 0原文

我在同一行上有两个元素向左浮动和向右浮动。

<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 并将其移过去）。

我也无法更改标记。

有没有统一的方法来排列它们？我尝试了使用百分比的 margin-right，我尝试在 element1 上使用负边距以使 element2 更接近（但无法使其工作）。

原文

I have two elements on the same line floated left and floated right.

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

I need for element2 to line up next to element1 with about 10 pixels of padding between the two. The problem is that element2's width can change depending on content and browser (font size, etc.) so it's not always lined up perfectly with element1 (I can't just apply a margin-right and move it over).

I also cannot change the markup.

Is there a uniform way to line them up? I tried margin-right with a percentage, I tried a negative margin on element1 to bring element2 closer (but couldn't get it to work).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜妞爱困 2025-01-08 11:56:31

使用 display:inline-block

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

示例

Using display:inline-block

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

Example

回复收藏 0 原文

别忘他 2025-01-08 11:56:31

div {
  display: flex;
  justify-content: space-between;
}

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

div {
  display: flex;
  justify-content: space-between;
}

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

回复收藏 0 原文

伴梦长久 2025-01-08 11:56:31

#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边距和填充之间的区别

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

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

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

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

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

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

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

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

reference : The Difference Between CSS Margins and Padding

回复收藏 0 原文

茶花眉 2025-01-08 11:56:31

通过使用 display: inline-block; 更一般地，当你有一个父级时（除了 html 之外总是有一个父级），使用 display: inline-block; 作为内部元素。并强制它们保持在同一行，即使窗口缩小（收缩）。为父级添加两个属性：

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

这里有一个更格式化的示例以使其清楚：

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

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

特别是对于这个示例，您可以将上面的内容应用为 Fellow（我假设父级是 body。如果不是，您将使用正确的父级），您如果可能的话，还可以更改 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;当元素超过帧限制时激活滚动。

By using display: inline-block; And more generally when you have a parent (always there is a parent except for html) use display: inline-block; for the inner elements. and to force them to stay in the same line even when the window get shrunk (contracted). Add for the parent the two property:

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

here a more formatted example to make it clear:

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

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

For this example particularly, you can apply the above as fellow (i'm supposing the parent is body. if not you put the right parent), you can also like change the html and add a parent for them if it's possible.

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.

回复收藏 0 原文

哭了丶谁疼 2025-01-08 11:56:31

如下更改您的 css

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

这是 JSFiddle http://jsfiddle.net/a4aME/

Change your css as below

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

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

回复收藏 0 原文

滿滿的愛 2025-01-08 11:56:31

在我使用这样的浮动元素的情况下，我通常需要确保容器元素始终足够大，足以容纳两个浮动元素的宽度加上所需的边距以适合其内部。最简单的方法显然是为两个内部元素提供固定宽度，使其正确适合外部元素内部，如下所示：

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

虽然这不是不是浮动解决方案，它确实会导致并排的列具有相同的高度，其中一个可以保持流动，而另一个则具有静态宽度。

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.

回复收藏 0 原文

伴梦长久 2025-01-08 11:56:31

现代答案肯定是 display:flex，尽管我发现 space-around 通常比 space- Between 能给我更好的结果:

.container {
  display: flex;
  justify-content: space-around
}

<!DOCTYPE html>
<html>
  <body>
    <div class='container'>
      <h1>hi</h1>
      <h1>bye</h1>
    </div>
  </body>
</html>

The modern answer is definitely display:flex, although I've found that space-around generally tends to gives me better results than space-between:

.container {
  display: flex;
  justify-content: space-around
}

<!DOCTYPE html>
<html>
  <body>
    <div class='container'>
      <h1>hi</h1>
      <h1>bye</h1>
    </div>
  </body>
</html>

回复收藏 0 原文

余罪 2025-01-08 11:56:31

这就是我用于与您类似类型的用例的方法。

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

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

回复收藏 0 原文

~没有更多了~