Html 为什么无序列表没有浮动到h1的右侧？_Html_Css_Css Float

Html 为什么无序列表没有浮动到h1的右侧？

html css

Html 为什么无序列表没有浮动到h1的右侧？,html,css,css-float,Html,Css,Css Float,HTML代码 <html> <head> <title>Front-end Web Developer</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <header class = "main-header clearfix"> <h1

HTML代码

<html>
<head>
    <title>Front-end Web Developer</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <header class = "main-header clearfix">
        <h1>Front-end Web Developer</h1>
        <nav class = "main-nav">
            <ul>
                <li><a href = "index.html">Home</a></li>
                <li><a href = "about.html">About</a></li>
                <li><a href = "portfolio.html">Portfolio</a></li>
                <li><a href = "contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

我已经尝试删除和更改每个元素的填充和边距的属性值

我还试着改变他们的字体大小值

什么都不管用，你们能看看这里有什么问题吗

我是否正确使用clearfix来清除浮动？这可能是所有这些的原因吗

我希望两个元素显示在同一行上

谢谢。

这就是我所改变的：

.main-nav ul li {
  margin: 0 10px;
}

正文{
字体大小：32px；
背景色：rgb（30,89,152）；
颜色：rgb（255、255、255）；
字体系列：Bookman，乔治亚州，衬线；
}
.主标题{
边框样式：实心；
边框：4px2px；
边框颜色：rgb（255、255、255）；
显示：内联块；
浮动：左；
}
h1{
字号：2em；
保证金：0px 0px；
}
.主导航{
浮动：对；
文本对齐：右对齐；
}
.主导航ul{
列表样式类型：无；
}
.主导航ul li a{
文字装饰：无；
}
.主导航ul li{
显示：内联块；
利润率：0px 10px；
字体大小：.8em；
填充：14px 0px；
}
a:链接{
颜色：rgb（255、255、255）；
}
a:参观了{
颜色：rgb（255、255、255）；
}
a:悬停{
颜色：rgba（2112112112110.8）；
}
.clearfix:之后{
内容：“；
明确：两者皆有；
}


前端Web开发人员

这就是我所改变的：

.main-nav ul li {
  margin: 0 10px;
}

正文{
字体大小：32px；
背景色：rgb（30,89,152）；
颜色：rgb（255、255、255）；
字体系列：Bookman，乔治亚州，衬线；
}
.主标题{
边框样式：实心；
边框：4px2px；
边框颜色：rgb（255、255、255）；
显示：内联块；
浮动：左；
}
h1{
字号：2em；
保证金：0px 0px；
}
.主导航{
浮动：对；
文本对齐：右对齐；
}
.主导航ul{
列表样式类型：无；
}
.主导航ul li a{
文字装饰：无；
}
.主导航ul li{
显示：内联块；
利润率：0px 10px；
字体大小：.8em；
填充：14px 0px；
}
a:链接{
颜色：rgb（255、255、255）；
}
a:参观了{
颜色：rgb（255、255、255）；
}
a:悬停{
颜色：rgba（2112112112110.8）；
}
.clearfix:之后{
内容：“；
明确：两者皆有；
}


前端Web开发人员

如果这是您想要做的，那么不要将整个标题向左浮动，只将标题向右浮动，然后将菜单向右浮动。

试试这个，我只将主导航ulli类中的边距调整为边距：0px 5px

正文{
字体大小：32px；
背景色：rgb（30,89,152）；
颜色：rgb（255、255、255）；
字体系列：Bookman，乔治亚州，衬线；
}
.主标题{
边框样式：实心；
边框：4px2px；
边框颜色：rgb（255、255、255）；
显示：内联块；
浮动：左；
背景：蓝色；
}
h1{
字号：2em；
保证金：0px 0px；
}
.主导航{
浮动：对；
文本对齐：右对齐；
}
.主导航ul{
列表样式类型：无；
保证金：0；
填充：0；
}
.主导航ul li a{
文字装饰：无；
文本对齐：右对齐；
宽度：100%；
}
.主导航ul li{
显示：内联块；
利润率：0px 5px；
字体大小：.8em；
填充：14px 0px；
}
a:链接{
颜色：rgb（255、255、255）；
}
a:参观了{
颜色：rgb（255、255、255）；
}
a:悬停{
颜色：rgba（2112112112110.8）；
}
.clearfix:之后{
内容：“；
明确：两者皆有；
}


前端Web开发人员

试试这个，我只将主导航ul li类中的边距调整为边距：0px 5px

正文{
字体大小：32px；
背景色：rgb（30,89,152）；
颜色：rgb（255、255、255）；
字体系列：Bookman，乔治亚州，衬线；
}
.主标题{
边框样式：实心；
边框：4px2px；
边框颜色：rgb（255、255、255）；
显示：内联块；
浮动：左；
背景：蓝色；
}
h1{
字号：2em；
保证金：0px 0px；
}
.主导航{
浮动：对；
文本对齐：右对齐；
}
.主导航ul{
列表样式类型：无；
保证金：0；
填充：0；
}
.主导航ul li a{
文字装饰：无；
文本对齐：右对齐；
宽度：100%；
}
.主导航ul li{
显示：内联块；
利润率：0px 5px；
字体大小：.8em；
填充：14px 0px；
}
a:链接{
颜色：rgb（255、255、255）；
}
a:参观了{
颜色：rgb（255、255、255）；
}
a:悬停{
颜色：rgba（2112112112110.8）；
}
.clearfix:之后{
内容：“；
明确：两者皆有；
}


前端Web开发人员

不要浮动整个包装头，只浮动元素：h1，main nav，并根据您的风格给它们50-50个宽度。

不要浮动整个包装头，只浮动元素：h1，主导航，给他们50-50个宽度或根据您的风格。

您可以尝试使用

空白：nowrap

？在哪个元素规则上？您可以尝试使用

空白：nowrap

？在哪个元素规则上？我希望列表在水平方向上紧靠h1。现在检查水平对齐我希望列表紧靠h1水平。现在检查水平对齐

.main-header {
border-style: solid;
border: 4px 2px;
border-color: rgb(255, 255, 255);
display: inline-block;

}
h1 {
font-size: 2em;
margin: 0px 0px;
float:left;
}

.main-nav {
float: right;

}