我如何让我的文本彼此相邻而不是在顶部

我希望谷歌表单文本是彼此相邻，而不是在彼此的顶部。这是一张图片。https://i.stack.imgur.com/Mf6dk.png。我还需要帮助修复我的悬停在文本功能。我添加了一个橙色的悬停，当你在文本上时，它会显示你在哪里，但当你这样做时，它不适合整个div。这是一张图片https://i.stack.imgur.com/IxMcd.png

下面是我的代码:

body {
margin: 0;
padding: 0;
background-color: rgb(187, 190, 4);
font-family: Arial;
}
.navBAr,
ul {
list-style: none;
background: #401f99;
padding: 0;
margin: 0;
text-align: center;
list-style: none;
}
.navBar,
li {
display: inline-block;
}
.navbar,
a {
text-decoration: none;
color: #fff;
width: 100px;
display: block;
padding: 25px 20px;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
}
.navBar,
a:hover {
background: orange;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Movie And Tv Shows Google Form Recomendations</title>
<link rel="stylesheet" href="background.css" />
</head>
<body>
<div id="navBar">
<ul>
<li><a href="index.html">HomePage</a></li>
<li><a href="/mainPages/googleForm.html">Google Form</a></li>
<li><a href="/mainPages/myMovies.html">Movies</a></li>
<li><a href="/mainPages/myTvShows.html">Shows</a></li>
<li><a href="/mainPages/topMovies.html">Top Movies</a></li>
<li><a href="/mainPages/topTvShows.html">Top Shows</a></li>
</ul>
</div>
</body>
</html>

Google Form"字符串是包装，因为你没有足够的空间，并有CSS属性white-space设置为默认的normal。覆盖默认值以获得所需的white-space: nowrap;。更多关于CSSwhite-space在这里:https://www.w3schools.com/cssref/pr_text_white-space.asp

body {
margin: 0;
padding: 0;
background-color: rgb(187, 190, 4);
font-family: Arial;
}
.navBAr,
ul {
list-style: none;
background: #401f99;
padding: 0;
margin: 0;
text-align: center;
list-style: none;
}
.navBar,
li {
display: inline-block;
}
.navbar,
a {
text-decoration: none;
color: #fff;
width: 100px;
display: block;
padding: 25px 20px;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
/* added the below */
white-space: nowrap;

}

<div id="navBar">
<ul>
<li><a href="index.html">HomePage</a></li>
<li><a href="/mainPages/googleForm.html">Google Form</a></li>
<li><a href="/mainPages/myMovies.html">Movies</a></li>
<li><a href="/mainPages/myTvShows.html">Shows</a></li>
<li><a href="/mainPages/topMovies.html">Top Movies</a></li>
<li><a href="/mainPages/topTvShows.html">Top Shows</a></li>
</ul>
</div>

使用font - family:宋体;CSS属性。Refernec

body {
margin: 0;
padding: 0;
background-color: rgb(187, 190, 4);
font-family: Arial;
}
.navBAr,
ul {
list-style: none;
background: #401f99;
padding: 0;
margin: 0;
text-align: center;
list-style: none;
}
.navBar,
li {
display: inline-block;
}
.navbar,
a {
text-decoration: none;
color: #fff;
width: 100px;
display: block;
padding: 25px 20px;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
white-space: nowrap; // add this
}
.navBar,
a:hover {
background: orange;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Movie And Tv Shows Google Form Recomendations</title>
<link rel="stylesheet" href="background.css" />
</head>
<body>
<div id="navBar">
<ul>
<li><a href="index.html">HomePage</a></li>
<li><a href="/mainPages/googleForm.html">Google Form</a></li>
<li><a href="/mainPages/myMovies.html">Movies</a></li>
<li><a href="/mainPages/myTvShows.html">Shows</a></li>
<li><a href="/mainPages/topMovies.html">Top Movies</a></li>
<li><a href="/mainPages/topTvShows.html">Top Shows</a></li>
</ul>
</div>
</body>
</html>

容器中没有足够的空间让文本跨出，所以它在换行。这里是一个解决方案，而不是将ul转换为一个灵活的容器，使项目走在一行。之后，我们可以简单地删除li的宽度，它将与填充流动。如果你想让项目更宽，只需增加水平填充。

body {
margin: 0;
padding: 0;
background-color: rgb(187, 190, 4);
font-family: Arial;
}
.navBAr,
ul {
list-style: none;
background: #401f99;
padding: 0;
width: 100%;
display: flex;
margin: 0;
text-align: center;
list-style: none;
}
.navBar,
li {

}
.navbar,
a {
text-decoration: none;
color: #fff;
display: flex;
padding: 25px 20px;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
}
.navBar,
a:hover {
background: orange;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Movie And Tv Shows Google Form Recomendations</title>
<link rel="stylesheet" href="background.css" />
</head>
<body>
<div id="navBar">
<ul>
<li><a href="index.html">HomePage</a></li>
<li><a href="/mainPages/googleForm.html">Google Form</a></li>
<li><a href="/mainPages/myMovies.html">Movies</a></li>
<li><a href="/mainPages/myTvShows.html">Shows</a></li>
<li><a href="/mainPages/topMovies.html">Top Movies</a></li>
<li><a href="/mainPages/topTvShows.html">Top Shows</a></li>
</ul>
</div>
</body>
</html>

相关内容

最新更新

热门标签：