Html div 类中的右对齐元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42050553/
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
Right align element in div class
提问by user172902
I am using angular 2 with Bootstrap 4 and Angular Material. However, I am having trouble right align the elements inside my container div. I want both my button and text to be aligned to the right hand side
我将 angular 2 与 Bootstrap 4 和Angular Material 一起使用。但是，我无法正确对齐容器 div 中的元素。我希望我的按钮和文本都与右侧对齐
Here is what the code that I have tried to produce the result as shown in the photo
这是我试图产生如图所示结果的代码
<div class="container">
<div class="pull-right">
<p class="d-inline pull-right">Some text</p>
<button type="button" class="btn btn-primary pull-right">+</button>
</div>
</div>
I have also tried this solution from StackOverflow
我也从StackOverflow尝试过这个解决方案
<div class="container">
<div class="asdf">
<p class="d-inline pull-right">Some text</p>
<button type="button" class="btn btn-primary pull-right">+</button>
</div>
</div>
.asdf {
margin-left:auto;
margin-right:0;
}
Both of these solutions does not move the elements to the right. What am I doing wrong?
这两种解决方案都不会将元素向右移动。我究竟做错了什么？
回答by Sumesh S
I've removed the class pull-rightclass from both the buttonand the ptag and added text-rightclass to the div.container.
我已经pull-right从button和p标签中删除了类类，并将text-right类添加到div.container.
I think this is what you need.
我认为这就是你所需要的。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwtheitroadesjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container text-right">
<p class="d-inline">Some text</p>
<button type="button" class="btn btn-primary d-inline">+</button>
</div>回答by Zim
In Bootstrap 4, pull-righthas been replaced with float-right.
在 Bootstrap 4 中，pull-right已被替换为float-right.
If float-rightis not working,remember that Bootstrap 4 is now flexbox, and many elements are display:flexwhich can prevent float-rightfrom working. In some cases, the utility classes like align-self-endor ml-autowork to right align elements that are inside a flexbox container like a Bootstrap 4 .row, Card or Nav. The ml-auto(margin-left:auto) is used in a flexbox element to push elements to the right.
如果float-right不起作用，请记住Bootstrap 4 现在是 flexbox，并且许多元素都display:flex可以阻止float-right工作。在某些情况下，实用程序类喜欢align-self-end或ml-auto用于右对齐 flexbox 容器内的元素，如 Bootstrap 4 .row、Card 或 Nav。的ml-auto（利润率左：汽车）在Flexbox的元件用于推动元件到右侧。
Also, remember that text-rightstill works on inline elements.
另外，请记住，它text-right仍然适用于内联元素。
回答by Harekrishna Murari
You are not doing anything wrong. Just copy and paste your code in any online bootstrap editor, you will get the right result. But you can write it in a more structured way
你没有做错任何事。只需将您的代码复制并粘贴到任何在线引导编辑器中，您就会得到正确的结果。但是你可以用更结构化的方式编写它
HTML code:
HTML代码：
<div class="container">
<div class="row">
<div class="col-md-12 .asdf">
<button type="button" class="btn btn-primary pull-right">+</button>
<p class="pull-right">Some text</p>
</div>
</div>
</div>
CSS code
CSS代码
.asdf {
margin-left:auto;
margin-right:0;
}
