css 如何在同一行对齐两个元素而不更改HTML

xxe27gdn 于 2023-01-10 发布在其他

关注(0)|答案(8)|浏览(194)

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

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

我需要让element 2和element 1对齐，两个元素之间有大约10个像素的填充，问题是element 2的宽度会根据内容和浏览器（字体大小等）而变化，所以它并不总是和element 1完美对齐（我不能应用一个右边距并将其移过去）。
我也无法更改标记。
有没有统一的方法来排列它们呢？我试过margin-right加上一个百分比，我试过在element 1上加上一个负的margin来拉近element 2（但是不能让它工作）。

css

来源：https://stackoverflow.com/questions/9067892/how-to-align-two-elements-on-the-same-line-without-changing-html

8条答案

按热度按时间

wyyhbhjk1#

使用display:inline-block

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

**一个

赞(0）回复(0）举报 2023-01-10

hec6srdp2#

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

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

赞(0）回复(0）举报 2023-01-10

nfeuvbwi3#

#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/
参考：The Difference Between CSS Margins and Padding

赞(0）回复(0）举报 2023-01-10

7d7tgy0s4#

通过使用**显示：内联块; * * 更一般地说，当你有一个父（除了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：自动;以在元素超过帧限制时激活滚动。

赞(0）回复(0）举报 2023-01-10

mklgxw1f5#

如下所示更改您的css

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

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

赞(0）回复(0）举报 2023-01-10

fdx2calv6#

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

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

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

赞(0）回复(0）举报 2023-01-10

bxgwgixi7#

现代的答案肯定是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>

赞(0）回复(0）举报 2023-01-10

8ulbf1ek8#

这是我在与您的用例类型类似的用例中使用的。

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

赞(0）回复(0）举报 2023-01-10

我来回答

css 如何在同一行对齐两个元素而不更改HTML

8条答案

相关问题

热门标签

最新问答