内联块元素未正确垂直对齐 [英] Inline-block elements not properly vertically-aligned

问题描述

我有一个包含多个内联块元素的行元素。问题是我不能为任何填充或边距添加填充或边距，因为边距本身溢出。我希望所有元素在垂直方向上完美对齐。



这是问题的图像：

此处 [ ^ ]



HTML：

< div id =''content''> 
< div class =''row''> 
< span class =''label''>提醒< / span> 
< div class =''复选框''> 
< div class =''checkbox_inner''>< / div> 
< / div> 
< span class =''label checkbox_label''>启用电子邮件提醒< / span> 
< / div> 
< / div> 

影响这些元素的CSS：

 正文 
 {
 颜色 ：  white;  
  margin  ：  0;  
  font-family  ： Lato，Helvetica Neue，Helvetica，Helvetica，Arial，sans-serif;  
  font-size  ：  11px;  
  font-weight  ：  700;  
} 
 
＃ content  
 {
  width  ：  100％;  
  height  ：  calc（100％ -  48px）;  
  background  ： 线性渐变（180deg，rgb（30,40,45），黑色）;  
 颜色 ：  rgb（150,155,160）;  
  position  ： 绝对;  
} 
 
。 inline_textbox  
 {
  display  ：  inline-block;  
} 
 
。 row  
 {
  margin  ：  8px 0;  
} 
 
。 row：after  
 {
  clear  ：  both;  
} 
 
。 label  
 {
  width  ：  200px;  
  display  ：  inline-block;  
} 
 
。复选框 
 {
 显示 ：  inline-block;  
  border-radius  ：  2px;  
  border  ：  1px solid rgb（80,100,120）;  
  transition  ：  border-color 0.3s;  
  cursor  ： 指针;  
} 

我是什么尝试过：



有人提到

---------------- ------

解决方案

无论如何，我无法猜出复选框是如何生成的。



这是一个例子。该示例使用输入复选框类型并将以下属性添加到复选框类

 padding：0; 
保证金：0; 
 vertical-align：top; 

cp_vertical_align - JSFiddle [ ^ ]

Hi,

I have a row element which contains several inline-block elements. The problem is that I can''t add padding or margin to any because the margin itself overflows. I''d like all elements to be perfectly aligned vertically.

Here''s an image of the issue:
here[^]

HTML:

<div id=''content''>
	<div class=''row''>
		<span class=''label''>Alerts</span>
		<div class=''checkbox''>
			<div class=''checkbox_inner''></div>
		</div>
		<span class=''label checkbox_label''>Enable Email Alerts</span>
	</div>
</div>

CSS affecting these elements:

body
{
	color: white;
	margin: 0;
	font-family: "Lato", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
}

#content
{
	width: 100%;
	height: calc(100% - 48px);
	background: linear-gradient(180deg, rgb(30,40,45), black);
	color: rgb(150,155,160);
	position: absolute;
}

.inline_textbox
{
	display: inline-block;
}

.row
{
	margin: 8px 0;
}

.row:after
{
	clear: both;
}

.label
{
	width: 200px;
	display: inline-block;
}

.checkbox
{
	display: inline-block;
	border-radius: 2px;
	border: 1px solid rgb(80,100,120);
	transition: border-color 0.3s;
	cursor: pointer;
}

What I have tried:

Mentioned in question
----------------------

解决方案

Anyway, I''m not able to guess how the checkbox was being generated.

Here is an example. The example use input checkbox type and added the following properties to the checkbox class

padding: 0;
  margin:0;
   vertical-align: top;

cp_vertical_align - JSFiddle[^]

这篇关于内联块元素未正确垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！