如何正确地创建我的段落和列表内联？
问题描述：
所以我有这个HTML &即时通讯编码，试图在同一行上。 我很确定他们是封锁线，这就是为什么他们不在同一条线上。 我如何正确地让他们留在网站上的同一行？ 对不起使用jsFiddle，我真的尝试过。如何正确地创建我的段落和列表内联？
我第一次尝试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Product Showcase</title>
</head>
<body>
<p id="Logo">VARGA NET</p>
<ul id="navigation">
<li>SPECIFICATIONS</li>
<li>LOOK AT IT</li>
<li>FEATURES</li>
<li>FREE</li>
<li>TESTIMONIALS</li>
<li>HOME</li>
</ul>
</body>
</html>
CSS
body {
background-image: url(Images/background.png);
background-repeat: no-repeat;
background-attachment: fixed;
}
#Logo{
color: White;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
padding-left: 60px;
padding-top: 20px;
}
li{
color: white;
float: right;
padding: 8px;
display: inline;
list-style: none;
}
正如你可以看到他们是不是在同一行所以我所做的就是我试图把它们放在一个div，这是什么我来了你。他们在同一条线上，但我觉得我做得不好。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Product Showcase</title>
</head>
<body>
<div inline-block class="headerLogoAndMenu">
<p id="Logo">VARGA NET</p>
<ul id="navigation">
<li>SPECIFICATIONS</li>
<li>BUY NOW</li>
<li>FEATURES</li>
<li>PRICE</li>
<li>TESTIMONIALS</li>
<li>HOME</li>
</ul>
</div>
</body>
</html>
CSS
.headerLogoAndMenu li{
font-family: sans-serif;
transition:0.5s;
color: white;
float: right;
padding-right: 8px;
padding-left: 8px;
padding-top: 16px;
display: inline;
list-style: none;
}
.headerLogoAndMenu #Logo{
font-family: sans-serif;
transition:0.5s;
color: white;
float: right;
display: inline;
list-style: none;
}
答
的一种方式做到这一点...
.headerLogoAndMenu {
display: table;
}
.headerLogoAndMenu p {
display: table-cell;
}
.headerLogoAndMenu ul {
display: table-cell;
}
.headerLogoAndMenu ul li {
display: table-cell;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Product Showcase</title>
</head>
<body>
<div class="headerLogoAndMenu">
<p id="Logo">VARGA NET</p>
<ul id="navigation">
<li>SPECIFICATIONS</li>
<li>BUY NOW</li>
<li>FEATURES</li>
<li>PRICE</li>
<li>TESTIMONIALS</li>
<li>HOME</li>
</ul>
</div>
</body>
</html>
答
另一种方式来做到这一点
.headerLogoAndMenu {
display: flex;
}
.headerLogoAndMenu ul {
display: flex;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Product Showcase</title>
</head>
<body>
<div class="headerLogoAndMenu">
<p id="Logo">VARGA NET</p>
<ul id="navigation">
<li>SPECIFICATIONS</li>
<li>BUY NOW</li>
<li>FEATURES</li>
<li>PRICE</li>
<li>TESTIMONIALS</li>
<li>HOME</li>
</ul>
</div>
</body>
</html>
答
我用flexboxes为标志和菜单的布局。垂直对齐已经安排在中心。
.headerLogoAndMenu {
display: flex;
justify-content: space-between;
align-items: center;
}
#navigation {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
}
.headerLogoAndMenu li {
font-family: sans-serif;
font-size: 10px;
padding-right: 4px;
padding-left: 4px;
list-style: none;
}
#Logo {
font-family: sans-serif;
}<div class="headerLogoAndMenu">
<p id="Logo">VARGA NET</p>
<ul id="navigation">
<li>SPECIFICATIONS</li>
<li>BUY NOW</li>
<li>FEATURES</li>
<li>PRICE</li>
<li>TESTIMONIALS</li>
<li>HOME</li>
</ul>
</div>
哪里的 “U” 来自于.headerLogoAndMenu∪{？ –
@ChristofferNilsson对不起，它应该是'ul'。对于这个简单的代码片段，并不是真的需要，但是指定表格单元很有用 –
有没有办法让列表项并排排列而不是相互排列呢？ –