如何在另一个div内的两个div之间插入一些水平空格？
[英]How to insert some horizontal space between two divs inside another div?
问题描述
I am trying to create a removable div element that will consist of two other divs: the text div and the remove div. 
我正在尝试创建一个可移动的div元素，它将由另外两个div组成：text div和remove div。
I am setting display: inline-block on removable_item_container to adjust the width of the container to the div contents. 我在removable_item_container上设置display: inline-block ，以将容器的宽度调整为div内容。
But how can I insert some white space (let's say 20% of the container width) between removable_item_text and removable_item_remove elements and keep the first element aligned to the left of the container div and the other one to the right? 但是如何在removable_item_text和removable_item_remove元素之间插入一些空格（比如容器宽度的20％）并保持第一个元素与容器div的左边对齐而另一个元素在右边？
<!DOCTYPE HTML> <html> <head> <link href="https://fonts.googleapis.com/css?family=Lora:400,700|Montserrat:300" rel="stylesheet"> <style> body { font-family: 'Montserrat', sans-serif; } .removable_item_container { display: inline-block; border-style: solid; border-width: 0.1px; padding: 5px; } .removable_item_container:hover { color: blue; cursor: grab; } .removable_item_text { float: left; } .removable_item_remove { float: right; } .removable_item_remove:hover { color: red; cursor: pointer; } </style> </head> <body> <div class="removable_item_container"> <div class="removable_item_text">Removable item</div> <div class="removable_item_remove">x</div> </div> <script> </script> </body> </html>
2 个解决方案
解决方案1
0 2019-06-10 13:26:15
You can use margin-left:20px to add a fixed space width, and both elements will be shown on the same line. 您可以使用margin-left:20px来添加固定的空间宽度，并且两个元素将显示在同一行上。
<!DOCTYPE HTML> <html> <head> <link href="https://fonts.googleapis.com/css?family=Lora:400,700|Montserrat:300" rel="stylesheet"> <style> body { font-family: 'Montserrat', sans-serif; } .removable_item_container { display: inline-block; border-style: solid; border-width: 0.1px; padding: 5px; } .removable_item_container:hover { color: blue; cursor: grab; } .removable_item_text { float: left; } .removable_item_remove { float: right; margin-left: 20px; } .removable_item_remove:hover { color: red; cursor: pointer; } </style> </head> <body> <div class="removable_item_container"> <div class="removable_item_text">Removable item</div> <div class="removable_item_remove">x</div> </div> <script> </script> </body> </html>
解决方案2
0 2019-06-10 16:34:14
If you are looking for a responsive way of doing this you could use flexbox. 如果您正在寻找一种响应方式，您可以使用flexbox。
https://yoksel.github.io/flex-cheatsheet/ https://yoksel.github.io/flex-cheatsheet/
- Set
display: flexandjustify-content: space-betweenon.removable_item_container在.removable_item_container上设置display: flex和justify-content: space-between.removable_item_container - Give
.removable_item_textaflex-basisof lets say70%(as example)给.removable_item_text一个flex-basis让我们说70%（例如） - Give
.removable_item_removeaflex-basisof lets say10%给.removable_item_remove一个flex-basis让我们说10% - I also added
text-align: right;我还添加了text-align: right;to your right element.到你正确的元素。 - You can then give your desired with to
.removable_item_container(200px in my example)然后，您可以将您想要的内容提供给.removable_item_container（在我的示例中为200px）
This will make the remaining space be 20% of the total width of your element. 这将使剩余空间为元素总宽度的20％。
body { font-family: 'Montserrat', sans-serif; } .removable_item_container { display: flex; width: 200px; justify-content: space-between; border-style: solid; border-width: 0.1px; padding: 5px; } .removable_item_container:hover { color: blue; cursor: grab; } .removable_item_text { flex-basis: 70%; float: left; } .removable_item_remove { text-align: right; flex-basis: 10%; float: right; } .removable_item_remove:hover { color: red; cursor: pointer; }
<!DOCTYPE HTML> <html> <head> <link href="https://fonts.googleapis.com/css?family=Lora:400,700|Montserrat:300" rel="stylesheet"> </head> <body> <div class="removable_item_container"> <div class="removable_item_text">Removable item</div> <div class="removable_item_remove">x</div> </div> <script> </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.