文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在另一个div中的两个div之间插入一些水平空间？

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

Stack Overflow用户

提问于 2019-06-10 21:06:27

回答 2查看 102关注 0票数 0

我正在尝试创建一个可移除的div元素，它将由另外两个div组成: text div和remove div。

我在removable_item_container上设置display: inline-block来调整容器的宽度以适应div内容。

但是如何在removable_item_text和removable_item_remove元素之间插入一些空白(比如容器宽度的20% )，并保持第一个元素与容器div的左侧对齐，另一个元素与容器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>

html

css

回答 2

Stack Overflow用户

发布于 2019-06-10 21:26:15

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

票数 0

Stack Overflow用户

发布于 2019-06-11 00:34:14

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

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

在.removable_item_container

Give上设置display: flex和justify-content: space-between .removable_item_text a flex-basis of let 70% (as

a70%of let .removable_item_remove a flex-basisof let
10%
I
1. display: flexjustify-content: space-between.removable_item_textflex-basis on 70%.removable_item_removeaflex-basisof let).
2. 然后您可以将所需的with设置为.removable_item_container (在我的示例中为200px)

这将使剩余的空间是元素总宽度的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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56527021

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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