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

Question

div中的span元素有一个工具提示。当我从span中移除工具提示时，请参阅第二个div (word)，输入字段比其他输入字段移动得稍微高一点。

我怎样才能解决这个问题？谢谢你的进阶。

    <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>

​