Question

我正在尝试创建一个可移动的div元素，该元素将由另外两个div组成：文本div和删除div。

我正在display: inline-block上设置removable_item_container，以将容器的宽度调整为div内容。

但是我该如何在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>

Answer 1

您可以使用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>

Answer 2

如果您正在寻找一种响应式的方式，则可以使用flexbox。

https://yoksel.github.io/flex-cheatsheet/

在Gluon TextField上设置display: flex和justify-content: space-between
给.removable_item_container和.removable_item_text个flex-basis（例如）
给70%和.removable_item_remove个flex-basis
我还为您的右侧元素添加了10%。
然后您可以将text-align: right;（在我的示例中为200px）中指定为所需内容

这将使剩余空间占元素总宽度的20％。

.removable_item_container

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

如何在另一个div内的两个div之间插入一些水平空间？

2 个答案: