html - 相对位置不采用div的自动宽度

Question

我已经在悬停时创建了导航菜单，但问题是当我将 widht 设置为 auto 时，文本会被打乱，为什么会这样，如果我设置为 150px 就没问题，但会给小文本带来问题谁能帮帮我

[https://jsfiddle.net/afdz86pg/][1]


  [1]: https://jsfiddle.net/afdz86pg/

Answer 1

第一个 span, a 是内联 block 元素，第二个你需要添加 position:relative 到 parent元素设置 child 元素，span 在这里，position:absolute 也是，设置 width 与 parent 元素，第 3 个在一行中获取 text 使用 white-space:nowrap 在 span 标签中设置它显示: block ，如下所示，

white-space:nowrap - Sets all character into single-line.

.co_nav {
    float: right;
    height: 60px;
    position: relative;
    margin-top:80px;
}

.co_nav > ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.co_nav > ul > li {
    float: left;
    width: 35px;
    position: relative;
}

.co_nav > ul > li > a {
    font-size: 18px;
    color: #b8b8b8;
    text-decoration: none;
    transition: ease-in-out all .5s;
    -webkit-transition: ease-in-out all .5s;
    -moz-transition: ease-in-out all .5s;
     position:relative;
     display:block;
}

.co_nav > ul > li > a:hover {
    color: #fcbf3c;
}

.co_nav > ul > li > a > span {
    width:auto;
    position: absolute;
    top: -27px;
    left: 0;
    display: block;
    font-size: 12px;
    padding: 5px 10px;
    background-color: rgba(13, 25, 39, 0.13);
    color: #333;
    border-radius: 5px;
    opacity: 0;
    transition: ease-in-out all .5s;
    -webkit-transition: ease-in-out all .5s;
    -moz-transition: ease-in-out all .5s;
    white-space:nowrap;
}

.co_nav > ul > li > a:hover > span {
    opacity: 1;
}

<div class="co_nav">
					<ul>
						<li>
							<a href="">A
								<span>Add To Portfolio</span>
							</a>
						</li>
						<li>
							<a href="">B
								<span>Add To Watchlist</span>
							</a>
						</li>
						<li>
							<a href="">c
								<span>Create Alerts</span>
							</a>
						</li>
					</ul>
				</div>