Question

我在悬停时创建了导航菜单，但是问题是，当我将widht设置为自动时文本正在分解为什么会这样，如果我设置为150px就可以了，但是会为小文本创建问题任何人都可以帮助我

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


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

Answer 1

第一个span, a为inline block elements，第二个您需要将position:relative添加到parent元素以设置child元素span ，position:absolute，将width设置为parent元素，将text设置为一行，使用white-space:nowrap标记中的span作为您设置了display：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>

Answer 2

我查看了指定的链接：https://jsfiddle.net/afdz86pg/ 并发现您的代码发生了什么问题。请删除

的位置是：相对于;

来自你的css e.i.在班级.co_nav > ul > li.

我希望它对你有所帮助。

谢谢，

位置相对不占用div的自动宽度

2 个答案: