个人中心
gpt4 book ai didi

html - 内部 div float 到下一行

转载 作者：搜寻专家 更新时间：2023-10-31 22:42:32 24 4
gpt4 key购买 nike

<分区>

我正在试验 div 并尝试使用创建复合控件

  1. 标签
  2. 文本域

HTML

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.form-control {
  background-color: yellow;
  margin: 0;
  padding: 0;
}
.form-control[data-layoutOrder=horizontal] div[data-section=title] {
  display: inline-block;
  background-color: red;
  width: 50%;
  margin: 0;
  padding: 0;
}
.form-control div[data-section=data] {
  background-color: green;
  display: inline-block;
  width: 50%;
  margin: 0;
  padding: 0;
}
<div class="form-control" data-layoutOrder="horizontal">
  <div data-section="title">
    <label for="firstName">First Name</label>
  </div>
  <div data-section="data">
    <input type="text" placeholder="First Name" id="firstName">
  </div>
</div>

上面代码的输出本应是标签和输入是相邻的，但事实并非如此。 div 包装文本字段实际上 float 到下一行，尽管我使用 CSS 将标签 div 和文本字段 div 的宽度设置为 50%。

Div floating to next line

我尝试将填充、边距等设置为 0，但它们都不起作用。是什么导致文本字段 div float 到下一行。当我将其中一个 div 的宽度更改为 49% 时，两个 div 都在一行上对齐。我不明白为什么它会这样？

注意:我可以使用 float 属性让它们彼此相邻 - float:left 用于标签 div 和 float:right 属性用于文本字段 div。但我想知道为什么设置 50% 的宽度在没有 float 的情况下不起作用。我真的需要使用 float 还是我遗漏了什么。

Expected output

编辑 1:我通过将 white-space 属性用作

找到了另一种解决方案 
.form-control {
background-color: yellow;
margin:0;
padding:0;
white-space:nowrap;
}

.form-control div[data-section=data] {
background-color : green;
display: inline-block;
width: 50%;
margin:0;
padding:0;
white-space:normal;
}

编辑 2:使用 flex 样式也有预期的效果。在进行更多搜索时，我还发现使用 flex 样式可以达到相同的效果。请注意，IE 10 及以下版本不支持它。引用caniuse .

.form-control {
  background-color: yellow;
  margin: 0;
  padding: 0;
  display: flex;
  display: -webkit-flex;
}
.form-control[data-layoutOrder=horizontal] div[data-section=title] {
  display: inline-block;
  background-color: red;
  width: 50%;
  margin: 0;
  padding: 0;
  flex:1;
}
.form-control div[data-section=data] {
  background-color: green;
  display: inline-block;
  width: 50%;
  margin: 0;
  padding: 0;
  flex:1;
}

24 4 0
文章推荐： node.js - 403/带有 Express 3/Node 的禁止错误自定义页面
文章推荐： php - symfony2 以编程方式验证用户
文章推荐： node.js - createWriteStream 与 writeFile？
文章推荐： php - PHPWord 的 HTML 阅读器不能处理表格？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com