时间戳

首页 > 解决方案 > 将子 div 设为内联？

html - 将子 div 设为内联？

问题描述

我有以下代码

input.check{
          display: inline;
        }
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.check{
  float: left;
  }
input.check{
  display: inline;
}
#parent { overflow: hidden }
 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" >
        <title>test</title>
    </head>
    <body>
        <form action="">
            <div >
                ENTER x:-
                <input type="text">
            </div>
            <div  >
                ENTER y:-
                <input type="text">
            </div>
            <div id="parent">
                ENTER from and to
                <br>
                <div class="check">
                FROM:-
                <input type="text">
                </div>
                <div class="check">
                TO:-
                <input type="text">
                </div>
            </div>
            <div >
                SEARCH COLUMNS:-
                <input id="columns" type="text">
           </div>
        </form>
    
    </body>
    </html>
如果您运行此代码，您会看到“from”和“to”的文本框位于它们下方，即使我已尝试将它们与默认显示内联，通过 css( input[type=text]) 显示为“inline-block”。我希望其他人保持原样，但对于“从”和“到”它需要像内联元素这样的标签。谢谢！请让我知道我无法覆盖显示属性的原因

标签： htmlcss

解决方案

将 CSS 替换为.check类

 .check{
    float: left;
 }

with

 .check {
     float: left;
     display: flex;
     align-items: center;
 }

推荐阅读