Html 如何在rails中的simple_form中将两个div与CSS放在同一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14113819/
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 put two divs on the same line with CSS in simple_form in rails?
提问by user938363
Putting two divs on the same line is an old question. But I can't find a solution when working with simple_form in rails. What I want to do is to display content and its label on the same line. The width of the label is 125px (.left) and the content is on the right (.right). The text in the label is aligned to the right and the text in content is aligned to the left.
将两个 div 放在同一行是一个老问题。但是在 rails 中使用 simple_form 时我找不到解决方案。我想要做的是在同一行显示内容及其标签。标签的宽度为 125px ( .left)，内容在右侧 ( .right)。标签中的文本向右对齐，内容中的文本向左对齐。
Here is the HTML:
这是 HTML：
<form id="new_production" class="simple_form new_production" novalidate="novalidate" method="post" action="/projects/1/productions" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="?" name="utf8">
<input type="hidden" value="2UQCUU+tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9+JRVjALat3hFM=" name="authenticity_token">
</div>
<div class="left">Proj Name：</div>
<div class="right">must have a name</div>
<div class="input string required">
Here is the CSS:
这是CSS：
.simple_form div.left {
float: left;
width: 125px;
text-align: right;
margin: 2px 10px;
display: inline;
}
.simple_form div.right {
float: left;
text-align: left;
margin: 2px 10px;
display: inline;
}
However, in the result, there is a linebreak, like so:
但是，在结果中，有一个换行符，如下所示：
Proj Name：
must have a name
The erb code of the simple form is:
简单形式的erb代码为：
<div class="left">Proj Name：</div><div class="right"><%= @project.name %></div>
I don't want to use a table but CSS only to solve the issue.
我不想使用表格而是使用 CSS 来解决问题。
回答by ap.singh
Your css is fine, but I think it's not applying on divs. Just write simple class name and then try. You can check it at Jsfiddle.
你的 css 很好，但我认为它不适用于 div。只需编写简单的类名，然后尝试。您可以在Jsfiddle进行检查。
.left {
float: left;
width: 125px;
text-align: right;
margin: 2px 10px;
display: inline;
}
.right {
float: left;
text-align: left;
margin: 2px 10px;
display: inline;
}
回答by Alexander Christiansson
You can't float or set the width ofan inline element. Remove display: inline;from both classes and your markup should present fine.
您不能浮动或设置内联元素的宽度。display: inline;从两个类中删除，您的标记应该可以正常显示。
EDIT: You can set the width, but it will cause the element to be rendered as a block.
编辑：您可以设置宽度，但它会导致元素呈现为块。
回答by a. mahdo
why not use flexbox ? so wrap them into another div like that
为什么不使用 flexbox ？所以把它们包装成另一个像这样的div
.flexContainer {
margin: 2px 10px;
display: flex;
}
.left {
flex-basis : 30%;
}
.right {
flex-basis : 30%;
}<form id="new_production" class="simple_form new_production" novalidate="novalidate" method="post" action="/projects/1/productions" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="?" name="utf8">
<input type="hidden" value="2UQCUU+tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9+JRVjALat3hFM=" name="authenticity_token">
</div>
<div class="flexContainer">
<div class="left">Proj Name：</div>
<div class="right">must have a name</div>
</div>
<div class="input string required"> </div>
</form>feel free to play with flex-basis percentage to get more customized space.
随意使用 flex-basis 百分比以获得更多定制空间。
