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

xxe27gdn  于 2023-01-10  发布在  其他
关注(0)|答案(8)|浏览(193)

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

<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(但是不能让它工作)。

wyyhbhjk

wyyhbhjk1#

使用display:inline-block

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

**一个

hec6srdp

hec6srdp2#

div {
  display: flex;
  justify-content: space-between;
}
<div>
  <p>Item one</p>
  <a>Item two</a>
</div>
nfeuvbwi

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

7d7tgy0s

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:自动;以在元素超过帧限制时激活滚动。

mklgxw1f

mklgxw1f5#

如下所示更改您的css

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

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

fdx2calv

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

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

bxgwgixi

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

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

相关问题