输入和跨度元素，工具提示在同一行的 div 中

Question

div 中的 span 元素有一个工具提示。当我从范围中删除工具提示时，请参阅第二个div(单词(，输入字段的移动位置略高于其余输入字段。

如何解决此问题？提前谢谢你。

    <div>
        <div class="word">
            <input id="word-4" name="word-4" type="text" data-index="3" value="the">
            <span class="x-tag" value="4"></span>
            <span class="tooltip" value="4"><span class="tooltiptext">Words</span>&gt;&lt;</span>
        </div>
        <div class="word">
            <input id="word-5" name="word-5" type="text" data-index="4" value="supermarket">
            <span class="x-tag" value="5"></span>
            <span class="" value=""></span>
        </div>
        <div class="word">
            <input id="word-6" name="word-6" type="text" data-index="5" value="nerby">
            <span class="x-tag" value="6"></span>
            <span class="tooltip" value="6"><span class="tooltiptext">Words</span>&gt;&lt;</span>
        </div>
    </div>

以下是完整示例：

https://jsfiddle.net/myFiddler/5encgkh0/1/

Answer 1

删除float:left from input，无需使用并给父元素填充

/***************/
/*	Tool-Tip   */
/***************/
/*https://www.w3schools.com/css/css_tooltip.asp*/
.parent{
  padding:25px;
}
.tooltip {
    position: relative;
    display: inline-block;
    /* border-bottom: 1px dotted black; If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
	position: absolute;
	z-index: 1;
    visibility: hidden;
	width: 120px;
	margin-left: -60px;
	bottom: 100%;
	left: 50%;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
	border-radius: 6px;
	
	/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
	opacity: 0;
	transition: opacity 2s;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}
.tooltip .tooltiptext:after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}
/********************/
/***  Word Input  ***/
/********************/
.word {
    width: 141px;
    display: inline-block;
    box-sizing: border-box;
	position: relative;
	margin-bottom: 12px;
}
.word .no-linking {
	cursor: auto;
}
.icon-link.checked {
	color: rgb(255,120,90);
}
.word > input {
    width: 100px !important;
    line-height: 24px;
    font-size: 14px !important;
}
span.word {
    border-radius: 4px;
    margin-bottom: 5px;
}
.icon-link {
	display: inline-block;
	padding-top: 6px;
	padding-left: 3px;
	cursor: pointer;
}
.x-tag:after {
    font-size: 13px;
    content: "x";
    padding: 1px 2px;
    position: absolute;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 100;
    right: 36px;
    line-height: 24px;
}

		<div class="parent">
			<div class="word">
				<input id="word-1" name="word-1" type="text" data-index="0" value="I">
				<span class="x-tag" value="1"></span>
				<span class="tooltip" value="1"><span class="tooltiptext">Words</span>&gt;&lt;</span>
			</div>
			<div class="word">
				<input id="word-2" name="word-2" type="text" data-index="1" value="go">
				<span class="x-tag" value="2"></span>
				<span class="tooltip" value="2"><span class="tooltiptext">Words</span>&gt;&lt;</span>
			</div>
			<div class="word">
				<input id="word-3" name="word-3" type="text" data-index="2" value="to">
				<span class="x-tag" value="3"></span>
				<span class="tooltip" value="3"><span class="tooltiptext">Words</span>&gt;&lt;</span>
			</div>
			<div class="word">
				<input id="word-4" name="word-4" type="text" data-index="3" value="the">
				<span class="x-tag" value="4"></span>
				<span class="tooltip" value="4"><span class="tooltiptext">Words</span>&gt;&lt;</span>
			</div>
			<div class="word">
				<input id="word-5" name="word-5" type="text" data-index="4" value="supermarket">
				<span class="x-tag" value="5"></span>
				<span class="" value=""></span>
			</div>
			<div class="word">
				<input id="word-6" name="word-6" type="text" data-index="5" value="nerby">
				<span class="x-tag" value="6"></span>
				<span class="tooltip" value="6"><span class="tooltiptext">Words</span>&gt;&lt;</span>
			</div>
		</div>