在右侧创建带有span的inputfield

Question

首先：我不使用bootstrap，我想构建它，没有bootstrap。

我想创建这个

，但我不知道如何处理输入字段右侧的跨度。这是我的尝试。

＆＃13;

＆＃13;

.input_register{
	padding: 5px;
	border: 2px solid green;
}

.input_register:hover{
	border: 2px solid #151A22;
}

.input_register:focus{
	border: 2px solid #151A22;
}

.register_span{
	background-color: red;
	padding: 5px;
	border: 2px solid #151A22;
    border-left: none;
}

＆＃13;

<div class="input_group">
  <input class="input_register" type="text"/><span class="register_span">D</span>
</div>

＆＃13;

＆＃13;

＆＃13;

为什么跨度更高作为输入字段？

Answer 1

display：inline-block;

inline-block显示与内联元素类似的特性，同时能够像块元素一样改变大小。

设置line-height: 1em会将containing block的高度设置为等于字体大小。在这种情况下，我使用line-height: 1.5em给它一些额外的空间。

此外，这些元素上的垂直填充会产生意想不到的结果，使用line-height可以提供更一致的外观。

.input_register,
.register_span {
    display: inline-block;
    font-size: 12pt;
    line-height: 1.5em;
    padding: 0px 5px;
}

.input_register{
    border: 2px solid green;
}

.input_register:hover{
    border: 2px solid #151A22;
}

.input_register:focus{
    border: 2px solid #151A22;
}

.register_span{
    background-color: red;
    border: 2px solid #151A22;
    border-left: none;
}

<div class="input_group">
  <input class="input_register" type="text"/><span class="register_span">D</span>
</div>