Question

这次我尝试将一个元素置于其他元素之间。使用表格，它的外观和行为完全像我希望的那样。看看小提琴中的第一个蓝线（也许你需要一个更宽的结果窗口才能看到正确的行为）：

＆＃13;

body, div, table, td {
    margin: 0;
    border: 0;
    padding: 0;
}

table, td {
    border-collapse: collapse;
}

.settings {
    background: blue;
}

.settings input.year{
    width: 3em;
}

.settings input.month,
.settings input.day,
.settings input.hour,
.settings input.minute{
    width: 1.5em;
}

.settings input.numbers{
    width: 2em;
}

.settings p{
    color: white;
}

/* version without table */
.settingsWithoutTable {
    background: blue;
}

.settingsWithoutTable input.year{
    width: 3em;
}

.settingsWithoutTable input.month,
.settingsWithoutTable input.day,
.settingsWithoutTable input.hour,
.settingsWithoutTable input.minute{
    width: 1.5em;
}

.settingsWithoutTable input.numbers{
    width: 2em;
}

.settingsWithoutTable span{
    color: white;
}

＆＃13;

<body>
    ...<br>
    <div class="settings"><table><tr>
        <td><p>From</p></td>
        <td><input class="year" value="2014"/></td>
        <td><input class="month" value="04"/></td>
        <td><input class="day" value="03"/></td>
        <td><input class="hour" value="02"/></td>
        <td><input class="minute" value="01"/></td>
        <td><button>Frst</button></td>
        <td><button>Scnd</button></td>
        <td style="width: 50%"></td>
        <td><button>Push</button></td>
        <td style="width: 50%"></td>
        <td><p>Num</p></td>
        <td><input class="numbers"></input></td>
    </tr></table></div>
    ...
    <div class="settingsWithoutTable">
        <span>From</span>
        <input class="year" value="2014"/>
        <input class="month" value="04"/>
        <input class="day" value="03"/>
        <input class="hour" value="02"/>
        <input class="minute" value="01"/>
        <button>Frst</button>
        <button>Scnd</button>
        <span style="width: 50%"></span>
        <button>Push</button>
        <span style="width: 50%"></span>
        <span>Num</span>
        <input class="numbers"></input>
    </div>
</body>

＆＃13;

现在我听说桌子现在不适合布局，这就是我试图摆脱它的原因。我尝试过的所有内联块等等都会带来像换行符这样糟糕的结果。

结果应该保持在一行中，元素应该像表格一样对齐。

使用css有一个好方法吗？

Answer 1

试试这个

html：

<div class="settingsWithoutTable">
       <div class="fromColumn">
        <span>From</span>
        <input class="year" value="2014"/>
        <input class="month" value="04"/>
        <input class="day" value="03"/>
        <input class="hour" value="02"/>
        <input class="minute" value="01"/>
        <button>Frst</button>
        <button>Scnd</button>
        </div>

        <div class="buttonColumn">
        <span style="width: 50%"></span>
        <button>Push</button>
        </div>

        <div class="numColumn">
        <span style="width: 50%"></span>
        <span>Num</span>
        <input class="numbers"></input>
            </div>
    </div>

的CSS：

.fromColumn, .buttonColumn, .numColumn{
    background:blue;
    display: inline-block;
    float:left;
    width:33.33%;
    padding:10px 0px 10px 0px;
}
.buttonColumn {
    text-align:center;
}
.fromColumn {
    text-align:left;
}.numColumn {
    text-align:right;
}

Answer 2

您可以使用此CSS将范围和输入元素居中。

.settingsWithoutTable{
 padding:10px;   
}

如果你需要更少的空间，你可以做这样的事情。

 .settingsWithoutTable{
     padding:10px 5px;   
 }

第一个数字用于顶部和底部，第二个数字用于两侧。

CSS速记从顶部开始顺时针运行。

Answer 3

使用浮点数查看此标记：

以下是fiddle

<强>的CSS：

.col {
    float: left;
    margin-right: 10%;
}
.col-right {
    float: right;
}

<强> HTML

<div class="settingsWithoutTable">
  <div class="col">
    <span>From</span>
    <input class="year" value="2014"/><input class="month" value="04"/><input class="day" value="03"/><input class="hour" value="02"/><input class="minute" value="01"/><button>Frst</button><button>Scnd</button>
  </div>
  <div class="col">
     <button>Push</button>
  </div>
  <div class="col-right">
    <span style="width: 50%"></span>
    <span style="width: 50%"></span>
    <span>Num</span>
    <input class="numbers"></input>
  </div>
</div>

Answer 4

这是我之前添加的修订版。它让你非常感兴趣。中间的按钮直接停留在中间。

.settingsWithoutTable{
    padding:10px 0
}

填充到顶部和底部。

.settingsWithoutTable input, .settingsWithoutTable button{
    margin:-4px
}

将输入和按钮组合在一起。

.settingsWithoutTable button:last-of-type{
    margin-left:31%
}

.settingsWithoutTable span:last-of-type, .settingsWithoutTable input:last-of-type{
    float:right;
        margin:0
}

浮动最后一个跨度并输入到右侧。

你必须翻转最后一个跨度并使用.settingsWithoutTable类在Div中输入，因为浮动右边的渲染方式。

喜欢这样。

<input class="numbers"></input>
<span>Num</span>

Answer 5

如果您不介意放弃对旧版IE浏览器的支持，可以使用FlexBox

只需设置＆＃39;行的显示即可。到flex并调整＆＃39;相应

＆＃13;

/* version without table */

.settingsWithoutTable {
  background: blue;
  display: flex;
  min-width: 400px;
}
.settingsWithoutTable .center {
  text-align: center;
  width: 100%;
}
.settingsWithoutTable input.year,
.settingsWithoutTable > button,
.settingsWithoutTable span {
  max-width: 3em;
  min-width: 3em;
}
.settingsWithoutTable input.month,
.settingsWithoutTable input.day,
.settingsWithoutTable input.hour,
.settingsWithoutTable input.minute {
  max-width: 1.5em;
  min-width: 1.5em;
}
.settingsWithoutTable input.numbers {
  max-width: 2em;
  min-width: 2em;
}
.settingsWithoutTable span {
  color: white;
}

＆＃13;

<div class="settingsWithoutTable">
  <span>From</span>

  <input class="year" value="2014" />
  <input class="month" value="04" />
  <input class="day" value="03" />
  <input class="hour" value="02" />
  <input class="minute" value="01" />
  <button>Frst</button>
  <button>Scnd</button>
  <div class="center">
    <button>Push</button>
  </div> <span>Num</span>

  <input class="numbers" />
</div>

＆＃13;

这是你的 Fiddle 来播放宽度

在没有表的情况下将HTML元素置于其他两个之间

5 个答案: