將子 div 設為內聯？

Question

我有以下代碼

 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] ）。 我希望其他人保持原樣，但是對於“from”和“to”，它需要像內聯元素這樣的標簽。 謝謝！ 請讓我知道我無法覆蓋顯示屬性的原因

Answer 1

將 CSS 替換為.check類

 .check{
    float: left;
 }

with

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

Answer 2

你的代碼：

input.check{
  display: inline;
}

將不起作用，因為input.check實際上意味着input元素也有一個check類，但沒有一個輸入元素在 html 中具有check類。

如果您希望標簽和輸入位於同一行並且不想使用flex ，那么您可以這樣做：

.check > input {    
  display: inline;
  width: auto;
}

使用flexbox ：

.check {
     float: left;
     width: 200px;  /* <== as you wish */
     display: flex;
     align-items: center;
 }

 .check > input {
   flex: 1
 }

將子 div 設為內聯？

問題描述

2 個解決方案

解決方案1
1 已采納 2020-02-21 12:04:18

解決方案2
0 2020-02-21 12:17:49

將子 div 設為內聯？

問題描述

2 個解決方案

解決方案1 1 已采納 2020-02-21 12:04:18

解決方案2 0 2020-02-21 12:17:49

解決方案1
1 已采納 2020-02-21 12:04:18

解決方案2
0 2020-02-21 12:17:49