不间断地显示内联或浮动 - 不使用媒体查询

Question

当我尝试向左添加浮动或内嵌显示时，出现问题。目前，我的表单最大宽度为 1000px。我所希望的是，如果名字和姓氏足够宽，它会自动并排浮动。那么也许输入名字和姓氏的最小宽度？

重要说明：我写这篇文章是为了测试编写 CSS DRY 代码。你会注意到如果你改变字体大小，整个项目都会改变大小，所以这对我很重要。另外，我不想使用媒体查询。

我知道我可能需要改变我的方法，我也对此持开放态度。与其说是寻找确切的代码答案。

form {
    text-align: center;
}

form ul, form li, form input, form label {
    box-sizing: border-box;
    margin: 0; padding: 0;
}
form ul {
    font-size: 100%;
    border: 3px solid #000;
    border-radius: .3em;
    max-width: 1000px;
    margin: 50px auto;
    list-style: none;
    overflow: hidden;
}

form li {
    position: relative;
    border-bottom: inherit;
    border-bottom: 3px solid;
}

form label {
    position: absolute;
    border-bottom: 1px dotted;
    border-bottom-color: inherit;
    width: 100%;
    padding: .3em .3em;
    padding-bottom: .1em;;
    top: 0; left: 0;
    font-size: .6em;
    text-transform: uppercase;
}

form input, form input:focus {
    text-transform: capitalize;
    text-align: inherit;
    background: transparent;
    border: none;
    width: 100%;
    font-size: 2em;
    padding: .7em .1em;
    padding-bottom: .2em;;
}

form input:focus {
    background-color: rgba(255, 255, 0, .2);
}

form input[type="submit"] {
    text-transform: uppercase;
    padding-bottom: 1.8em;
    font-size: .6em;
    height: 1.5em;
    background-color: #ddd;
    
}

<form action="">
    <ul>
        <li>
            <input id="first-name" type="text" autofocus>
            <label for="first-name">First Name</label>
        </li>
        <li>
            <input id="last-name" type="text">
            <label for="last-name">Last Name</label>
        </li>
        <li>
            <input id="username" type="text">
            <label for="username">Username</label>
        </li>
        <li>
            <input type="submit" name="submit">
        </li>
    </ul>
    
</form>

Answer 1

.fl-name {
  display: flex;
  flex-direction: row;
}

Answer 2

你可以尝试使用bootstrap网格系统

这样你就可以将输入输入到列中

bootstrap grid system

看看这个 fiddle： gri system sample

<div class='row'>
<div class="col-xs-2">Hi</div>
<div class="col-xs-2">Hi</div>

在您的情况下，col-xs-6 将为您提供 2 列全宽

Answer 3

不确定这是否是您想要的，但它似乎符合您的标准。

form {
  text-align: center;
}
form ul,
form li,
form input,
form label {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
form ul {
  font-size: 100%;
  border: 3px solid #000;
  border-radius: .3em;
  max-width: 1000px;
  margin: 50px auto;
  list-style: none;
  overflow: hidden;
}
form li {
  position: relative;
  border-bottom: inherit;
  border-bottom: 3px solid;
}
form label {
  position: absolute;
  border-bottom: 1px dotted;
  border-bottom-color: inherit;
  width: 100%;
  padding: .3em .3em;
  padding-bottom: .1em;
  ;
  top: 0;
  left: 0;
  font-size: .6em;
  text-transform: uppercase;
}
form input,
form input:focus {
  text-transform: capitalize;
}
form #fl-name {
  display: inline-block;
}
form .floatMe {
  float: left;
}
form .clearMe {
  clear: right;
}

<form action="">
  <ul>
    <div class="fl-name">
      <li class="floatMe">
        <input id="first-name" type="text" autofocus>
        <label for="first-name">First Name</label>
      </li>
      <li class="floatMe clearMe">
        <input id="last-name" type="text">
        <label for="last-name">Last Name</label>
      </li>
    </div>
    <li>
      <input id="username" type="text">
      <label for="username">Username</label>
    </li>
    <input type="submit" name="submit">
  </ul>

</form>

Answer 4

Flexbox 是这个问题最现代的解决方案。但是，请记住为某些浏览器添加必要的前缀。如果需要IE9支持，请看下面的浮动解决方案：

HTML

 <form action="">
    <ul>
        <li class="split">
            <input id="first-name" type="text" autofocus>
            <label for="first-name">First Name</label>
        </li>
        <li class="split">
            <input id="last-name" type="text">
            <label for="last-name">Last Name</label>
        </li>
        <li class="fill">
            <input id="username" type="text">
            <label for="username">Username</label>
        </li>
        <input type="submit" name="submit">
    </ul>

</form>

CSS

form {
    text-align: center;
}

form ul, form li, form input, form label {
    box-sizing: border-box;
    margin: 0; padding: 0;
}
form ul {
    font-size: 100%;
    border: 3px solid #000;
    border-radius: .3em;
    max-width: 1000px;
    margin: 50px auto;
    list-style: none;
    overflow: hidden;
}

form li {
    position: relative;
    border-bottom: inherit;
    border-bottom: 3px solid;
}

form label {
    position: absolute;
    border-bottom: 1px dotted;
    border-bottom-color: inherit;
    width: 100%;
    padding: .3em .3em;
    padding-bottom: .1em;;
    top: 0; left: 0;
    font-size: .6em;
    text-transform: uppercase;
}

form input, form input:focus {
    text-transform: capitalize;
    text-align: inherit;
    background: transparent;
    border: none;
    width: 100%;
    font-size: 2em;
    padding: .7em .1em;
    padding-bottom: .2em;;
}

form input:focus {
    background-color: rgba(255, 255, 0, .2);
}

form input[type="submit"] {
    text-transform: uppercase;
    padding-bottom: 1.8em;
    font-size: .6em;
    height: 1.5em;
    background-color: #ddd;

}

@media only screen and (min-width: 768px) {
  li {
    clear: both;
  }

  li.split {
    width: 50%;
    float: left;
    clear: none;
  }
}

https://jsfiddle.net/qefo9eLr/

Answer 5

这是使用我们忠实的老花车的另一种选择：https://jsfiddle.net/mvpu6s5o/3/

主要区别基本上就在这里：

form li {
    width: 33.33%;
    float: left;
}

form li:nth-child(3) {
  float: right;
}

form li:last-child {
  width: 100%;
  clear: both;
}

我使用了带百分比的宽度来保持它的流畅性，所以它会适应不同的屏幕尺寸。 li:nth-child(3) 将最后一个输入浮动到右侧，因此我们可以消除由于 33.33% 宽度而导致的最后一个小间隙。 form li:last-child 用于将两个浮点数清除到最后一个输入（因为这也是一个 li）。

Answer 6

我只是更改语义并应用 flexbox。这是结果：

*, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  align-items: center;
  /background-color: #EB6361;
  display: flex;
  height: 100vh;
  justify-content: center;
}
form {
  box-shadow: 0 0 0 8px rgba(204,204,204,.85);
  border-radius: 5px;
  width: 500px;
}
form header {
  background-color: #1ABC9C;
}
form header p {
  color: #FFF;
  font-family: 'ubuntu';
  font-size: 15px;
  padding: 15px 10px;
  text-align: center;
}
form .body {
  background-color: #EEE;
  padding: 15px 20px;
}
form .body .block {
  border: 2px solid #333;
  border-radius: 4px;
  overflow: hidden;
}
form .body .block:not(first-of-type) {
  margin-top: 10px;
}
form .body .block:first-of-type > .group {
  width: 98%;
}
form .body .block:first-of-type {
  display: flex;
}
form .body .block .group {
  display: flex;
  flex-flow: column-reverse nowrap;
  overflow: hidden;
}
form .body .block:first-of-type .group:first-of-type {
  border-right: 2px solid #333;
}
form input {
  background-color: transparent;
  border: none;
  color: #555;
  font-size: 22pt;
  padding: 6px 10px;
  text-align: center;
}
form input:focus, form input:focus + label {
  background-color: #F7F8E0;
}
form label {
  border-bottom: 1px dotted #bbb;
  color: #555;
  font-family: 'ubuntu';
  font-size: 11px;
  padding: 2px;
  text-align: center;
  text-transform: uppercase;
}
form footer {
  overflow: hidden;
}
form footer button {
  background-color: #F39C12;
  color: #FFF;
  cursor: pointer;
  width: 100%;
  border: none;
  padding: 4px;
}

<form action="">
  <header>
    <p>Submit Query Form</p>
  </header>
  <section class="body">
    <div class="block">
      <div class="group">
        <input type="text" />
        <label for="">First Name</label>
      </div>
      <div class="group">
        <input type="text" />
        <label for="">Last Name</label>
      </div>
    </div>
    <div class="block">
      <div class="group">
        <input type="text" />
        <label for="">Username</label>
      </div>
    </div>
  </section>
  <footer>
    <button>Submit query</button>
  </footer>
</form>

Answer 7

一个非常简单的解决方案是使用 Flexbox。将 parent 元素设置为显示类型 'flex'。同时设置 flex wrap: wrap // 这样 children 将在需要时换行。 children 变为 flex objects。因为我希望它们是均匀的，所以我将它们都设置为 flex grow：1 设置 children 到 flex-basis 为 300px。 // 这几乎就像最小宽度。这会触发换行。

body {
    padding: 50px;
}
.main {
    background-color: #e9e9e9;
    display: flex;
    flex-wrap: wrap;
}

.main input {
    background-color: #e9e9e9;
}
.one {
    flex-grow: 1;
    flex-basis: 300px
}

.two {
    flex-grow: 1;
    flex-basis: 300px;
}

<head>
    <link rel="stylesheet" href="inline.css">
</head>
<body>
    
    
    <form class="main">

        <input type="text" class="one">
        <input type="text" class="two">

    </form>
    
    
</body>

不间断地显示内联或浮动 - 不使用媒体查询

Display inline or float without breaking - without using media queries

html

css

inline

display