Html 如何在保留行内块显示的同时实现浮动：正确的效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13322070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to achieve the float:right effect while preserving the inline-block display?
提问by mark
Consider the following jsFiddle: http://jsfiddle.net/mark69_fnd/yqdJG/1/
考虑以下 jsFiddle：http: //jsfiddle.net/mark69_fnd/yqdJG/1/
HTML:
HTML：
<div id="container">
<div class="char">
AAA
</div>
<div class="char stickToRight">
BBB
</div>
</div>?
CSS:
CSS：
#container {
border:solid 2px green
}
.char {
display: inline-block;
border: solid 2px red;
}
.stickToRight {
float: right
}?
Is there another way to make .stickToRightbe aligned right, without floating it?
有没有另一种方法可以使.stickToRight对齐正确，而不浮动？
I need to keep it as display:inline-blockso that I can make its vertical alignment consistent with other .charelements.
我需要保持它，display:inline-block以便我可以使其垂直对齐与其他.char元素一致。
How can I achieve the float:rightright-alignment effect, whilst keeping the element display:inline-block? (Note that I do not know the width of the container element.)
如何float:right在保持元素的同时实现右对齐效果display:inline-block？（请注意，我不知道容器元素的宽度。）
I'd like purely CSS solutions, if there are any.
如果有的话，我想要纯粹的 CSS 解决方案。
回答by Marcos Pereira
I was having the same problem, and found out using direction: rtl;on the container is the best solution. https://css-tricks.com/almanac/properties/d/direction/
我遇到了同样的问题，发现direction: rtl;在容器上使用是最好的解决方案。https://css-tricks.com/almanac/properties/d/direction/
回答by Paul D. Waite
An element can't be inline-blockand floated at the same time.
一个元素不能同时inline-block浮动。
When an element is set to inline-block, it differs from display:inlineelements in that it can have a width and height specified. However, it's still part of the inline layout flow — its horizontal position is determined by its source order and the text-alignproperty of its block-level parent, and its vertical position with the line is determined by the vertical-alignproperty.
当元素设置为 时inline-block，它与display:inline元素的不同之处在于它可以指定宽度和高度。然而，它仍然是内联布局流程的一部分——它的水平位置由它的源顺序和text-align它的块级父级的属性决定，它与线的垂直位置由vertical-align属性决定。
When an element is floated, it's no longer part of the inline layout flow. Its horizontal position is determined by whether it's floated leftor right, and whether there are other floated elements before it, and its vertical position is determined by a fairly involved set of rules that Eric Meyer describes really well in CSS: the Definitive Guide, but that basically boil down to “the top of the inline box in which it would have appeared if it wasn't floated”.
当元素浮动时，它不再是内联布局流程的一部分。它的水平位置取决于它是浮动的left还是right，以及在它之前是否有其他浮动元素，它的垂直位置取决于 Eric Meyer 在CSS 中描述得非常好的一组相当复杂的规则：权威指南，但基本上归结为“如果它没有浮动它就会出现的内联框的顶部”。
I'm still not quite sure what visual effect you're imagining when you say you want the element to be floated and inline-blockat the same time, but float layout is different from inline-blocklayout in terms of both horizontal and vertical position, and there isn't any way to combine them.
当您说希望元素同时浮动inline-block时，我仍然不太确定您所想象的视觉效果，但是浮动inline-block布局在水平和垂直位置方面都与布局不同，并且没有没有任何方式将它们结合起来。
回答by Duannx
Since the inlineelement can not float, we can not build some complicate layout. Then flexboxwas introduced and now we have a powerful technology can solve most layout problems. To achieve your expected result, just do simply like this:
由于inline元素不能float，我们不能构建一些复杂的布局。然后flexbox被引入，现在我们有一个强大的技术可以解决大多数布局问题。要达到您的预期结果，只需这样做：
#container {
border: solid 2px green;
display: flex;
}
.char {
border: solid 2px red;
;
}
.float-right {
margin-left: auto;
}<div id="container">
<div class="char ">
AAA
</div>
<div class="char float-right">
BBB
</div>
</div>回答by Dmytro Lopushanskyy
Apply text-align: rightto parent div
应用于text-align: right父div
回答by Gonnarule
If you want to align to the right of its parent an element without using float, you can go for the CSS3 box-flex property. Here is a post with an example on how to use it : How to align on the right an inline-block element?
如果您想在不使用浮动的情况下将元素与其父元素的右侧对齐，则可以使用 CSS3 box-flex 属性。这是一篇关于如何使用它的示例的帖子： 如何在右侧对齐内联块元素？
Mark that it's a CSS3 solution and therefore not compatible with all browsers (point at IE9-)
标记它是一个 CSS3 解决方案，因此不兼容所有浏览器（指向 IE9-）
回答by karimlo
It may be too late to help with this, but just in case someone stumbles on this, here you go. Paul D. Waite, answered the source of your problem. I think I know what you're trying to achieve. I have done something "wrong" to accomplish that just in case you're desperate and you want to avoid Flexbox. Keep your last element inline-block, and float: right. and add this to it. .last-element-in-your-row
对此提供帮助可能为时已晚，但以防万一有人偶然发现了这一点，就在这里。Paul D. Waite，回答了您问题的根源。我想我知道你想要达到什么目的。我做了一些“错误”的事情来完成它，以防万一你绝望并且你想避免使用 Flexbox。保持最后一个元素内联块，并浮动：正确。并将其添加到其中。.last-element-in-your-row
{
display: inline-block;
float: right;
/*add this to stick that guy on the right*/
position: relative;
right: 0;
top: 0;}
Again this is not the right way, but it works...
同样，这不是正确的方法，但它有效......
回答by Nathan Lykke
I personally would avoid float: rightand tabled displays at all costs, but that's my preference. I haven't found a better way to do this other than resorting to the necessary evil that is absolute positioning. Although, for this purpose, it might make display: inline-blockuseless, it usually gives the desired effect in these scenarios. An example would be (using your code as a guideline) a header, with the logo positioned as if "floating" left, and ulpositioned as if "floating" right.
我个人会float: right不惜一切代价避免和展示展示，但这是我的偏好。除了诉诸绝对定位的必要邪恶之外，我还没有找到更好的方法来做到这一点。尽管为此目的，它可能会变得display: inline-block毫无用处，但它通常会在这些场景中提供所需的效果。一个例子是（使用您的代码作为指导）一个标题，其标志定位为“浮动”左侧，ul定位为“浮动”右侧。
<div class="container">
<h1>Logo</h1>
<ul>
<li> Link 1 </li>
<li> Link 2 </li>
</ul>
</div>
The basic CSS being:
基本的 CSS 是：
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0 15px;
box-sizing: border-box;
}
.container h1 {
display: inline-block;
}
.container ul {
padding: 0;
margin: 0;
display: inline-block;
position: absolute;
right: 15px; /* I use 15px to replicate the 15px padding on the container*/
}
.container ul li {
display: inline-block;
}
This is the scenario where I use this code most often. In most cases in the content I have percentage widths for my containers, removing the need (most of the time) for positioning. IE:
这是我最常使用此代码的场景。在内容的大多数情况下，我的容器都有百分比宽度，消除了（大部分时间）定位的需要。IE：
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.left {
display: inline-block;
width: 60%;
margin-right: -4px; /* I use this because I've noticed a 4px spacing when using inline block sometimes */
}
.right {
display: inline-block;
width: 40%;
margin-right: -4px;
}
