Question

<div id='mdnew'>
<div class=' gblue mdtitle'>NEW TAG</div>
<input id='inpnew' type='text' autocomplete='off' maxlength=25 placeholder='NEW TAG'>
<div class='gblue leftcancel'>CANCEL</div>
<div class='gblue rightok' id='newok'>OK</div>
<div class='clear'></div>
</div>

当输入有焦点（即指针在里面）并且鼠标在cancel按钮上时 - 输入失去了它的左边距！

完整代码为here

Answer 1

用input包裹你的div，它会有效。

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

#mdnew {
    position:fixed;
    z-index:2;
    width:300px;
    left:calc(50% - 150px);
    top:63px;
    background: red;
    border-radius:5px;
    overflow:hidden;
}

#inpnew {
    display:block;
    width:calc(100% - 28px);
    margin:14px auto;
    line-height:21px;
    outline:none;
    border:1px solid #999;
    border-radius:5px;
    padding:0 7px;
}

.leftcancel {
    float:left;
    width:50%;
    line-height:23px;
    cursor:pointer;
    text-align:center;
}

.rightok {
    float:right;
    width:50%;
    line-height:23px;
    cursor:pointer;
    text-align:center;
}

.leftcancel:hover, .rightok:hover {
    opacity:0.8;
}

.gblue {
    background: -webkit-linear-gradient(to top, #003b61, #0099cc);
    background: linear-gradient(to top, #003b61, #0099cc);
    color:white;
    letter-spacing:0.5px;
}

.mdtitle {
    line-height:23px;
    text-align:center;
    letter-spacing:0.5px;
}

<div id="mdnew">
    <div class=" gblue mdtitle">NEW TAG</div>
    <div>
        <input id="inpnew" type="text" autocomplete="off" maxlength="25" placeholder="NEW TAG" >
    </div>
    <div class="gblue leftcancel">CANCEL</div>
    <div class="gblue rightok" id="newok">OK</div>
    <div class="clear"></div>
</div>

这是Updated Fiddle ..

Answer 2

如果您要将输入的宽度计算为100% - 28px，那么14px和margin-left使用margin-right是安全的：

#inpnew {
    margin: 14px;
}

Answer 3

因为opacity的{{1}}，.leftcancel悬停，它对兄弟的影响

删除该部分并测试

rightok

fiddle

更新：

要使其与不透明度一起使用，请将.leftcancel:hover, .rightok:hover{ //opacity:0.8; }和position添加到z-index和.leftcancel

您在.rightok和.leftcancel上设置的不透明度正在创建新的堆叠上下文，而堆叠上下文会影响z索引。由于您未手动指定z-indexes，因此它们是自动分配的，而.rightok和.leftcancel的值高于.rightok，因为它会在标记的后面出现。

参考：W3C Color Module

如果未定位不透明度小于1的元素，则实现必须在其父堆叠上下文中以相同的堆叠顺序绘制它创建的层，如果它是具有'z-index的定位元素，则使用该堆叠顺序： 0'和'不透明度：1'。

#inpnew

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

#mdnew{
	position:fixed;
	z-index:2;
	width:300px;
	left:calc(50% - 150px);
	top:63px;
	background: red;
	border-radius:5px;
	overflow:hidden;
}

#inpnew{
   
    
	display:block;
	width:calc(100% - 28px);
	margin:14px auto;
	line-height:21px;
	outline:none;
	border:1px solid #999;
	border-radius:5px;
	padding:0 7px;
}

.leftcancel{
    position:relative;
    z-index:5;
	float:left;
	width:50%;
	line-height:23px;
	cursor:pointer;
	text-align:center;
}

.rightok{
    position:relative;
    z-index:5;
	float:right;
	width:50%;
	line-height:23px;
	cursor:pointer;
	text-align:center;
}

.leftcancel:hover, .rightok:hover{
	opacity:0.8;
}

.gblue{
	background: -webkit-linear-gradient(to top, #003b61, #0099cc);
	background: linear-gradient(to top, #003b61, #0099cc);
	color:white;
	letter-spacing:0.5px;
}

.mdtitle{
	line-height:23px;
	text-align:center;
	letter-spacing:0.5px;
}

更新的小提琴是：https://jsfiddle.net/5qperdzb/16/

当兄弟的不透明度改变时，输入会丢失其边距

3 个答案: