html - 我如何使文本内联
问题描述
我正在尝试为一个网站制作一个菜单,当它有两个单词时,文本会出现在下面,就像这样我不知道为什么会发生这种情况,但我一直在尝试修复它,但我不知道怎么做。
这是代码
body
{
margin: 0;
padding: 0;
background: #262626;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 16px;
color: #e2e2e2;
}
.menu
{
position: absolute;
width: 100%;
text-align: center;
text-transform: lowercase;
left: 50%;
top: 30%;
transform: translate(-50%);
}
ul
{
position: absolute;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(4, 1fr);
left: 50%;
transform: translate(-50%);
}
ul li
{
list-style: none;
}
ul li a
{
display: block;
padding: 100px;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
transition: .5s;
color: #262626;
background: #e2e2e2;
}
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="menu">
<h1>kaszam</h1>
<ul>
<li><a href="#aboutMe">about me</a></li>
<li><a href="#pcSpecs">pc specs</a></li>
<li><a href="#accounts">accounts</a></li>
<li><a href="#usefulLinks">useful links</a></li>
</ul>
</div>
</body>
</html>
我正在尝试为一个网站制作一个菜单,当它有两个单词时,文本会出现在下面,就像这样我不知道为什么会发生这种情况,但我一直在尝试修复它,但我不知道怎么做。
解决方案
尝试添加white-space: nowrap;
如果我理解正确你想要达到的目标,这将防止破坏单词。
推荐阅读
- python - 创建除数字典
- javascript - 在 D3.js 中查找两个日期之间的中间日期
- php - Joomla 将生产转移到本地主机进行测试
- android - Android Studio - 将项目作为模块导入不起作用
- json - 自定义 UITable 未使用 Json 文件填充到模拟器中
- python - Pyopengl - 在 glUseProgram 之前和之后有 glGetUniformLocation 和 glUniformMatrix4fv 有什么区别?
- excel - (Excel)有没有办法自动突出两个之间较大的数字?
- javascript - 即使资产链接正确,TWA 也会显示地址栏
- cmake - CMake 子模块无法解决 MSVC 上的项目依赖关系“无法打开包含文件”
- sql - DENSE_RANK() 和 LEAD() 函数之间是否存在依赖关系/互连?