我有以下代码

 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”,它需要像内联元素这样的标签。 谢谢! 请让我知道我无法覆盖显示属性的原因

#1楼 票数:1 已采纳

将 CSS 替换为.check

 .check{
    float: left;
 }

with

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

#2楼 票数:0

你的代码:

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
 }

  ask by SuperAadi translate from so

未解决问题?本站智能推荐:

3回复

如何仅使用html内联样式将div中的iframe高度设为100%

使用下面的当前代码,它为我提供了一个滚动条,但我希望显示整个网页。 如果我将高度从100%更改为1150px,这似乎可行,但是我希望它是动态的,因此希望将其设置为100%。 宽度似乎可以100%正常工作,而不是高度。
1回复

什么是CSS片段,以将子div的中心位置设为父div—[关闭]

已关闭 。 这个问题需要更加集中。 它当前不接受答案。 了解更多 。 想改善这个问题吗? 更新问题,使其仅通过编辑此帖子来关注一个问题。
3回复

如何在2个div上显示内联:块,其中1个有子div

我有一些看起来像这样的html: 无论我尝试什么,我都无法让它们看起来像这样: 我试过显示块,但单独的 div 把它搞砸了。 任何帮助将非常感激。 谢谢你! ** - - 编辑 - -** 我被要求展示我的 css,但基本上就是这样。 另外,请注意我不能操作 HTML:
2回复

带有子重叠div的div的内联显示

我是一个菜鸟,每天都在尝试学习有关CSS的更多信息(即使我笨拙且“不是自然的”,我的大脑也像一台旧计算机一样蒸腾)。 我想了解如何编写一组独立的模块,这些模块共享相同的样式并以两行两列的形式内联显示。 我想使用z-index和absolute定位为每个模块重新创建纸叠。 我制作了这张图片
2回复

子div不在父div内联

我必须做一些愚蠢的事情或看一些显而易见的事情,因为无论我做什么,我都无法在父级内嵌这三个div 。 .stats { display: inline-block; margin-right: 6px; float: right; padding: 0; font-family: "Rob
4回复

如何将多个div(及其子元素)显示为内联?

我试图通过将父div设置为以下内容并排显示4个div部分: 4个div(嵌套有子元素)仍作为块元素堆叠: 但我希望它们并排在一起-test1 test1 test1
2回复

将div绝对设为特定div

是否可以将div绝对设为特定的相对div而不仅仅是父级? 例如。 我有一个包含在行内的div。 但是,我希望它在section而不是row是绝对的。 由于WordPress主题样式,两个div都relative放置。 如果我使用absolute位置,它将使其对row绝对。 我该如
1回复

CSS更改内联子div的宽度

嗨,大家好,我正在构建一个项目,每个孩子的div分别具有容器的整个宽度,内联显示,非常类似于内联导航菜单。 每个单独的子元素的宽度都包含父元素的整个范围,但是一次仅显示一个元素。 我已经完成了此操作,但是以一种非常低效的方式完成了此操作,我使用了一个空白html字符来实现此效果。