HTML & CSS : Float Attribute Issue

Question

我在某些文本旁边 float ul 时遇到问题。

这是图片:

我在想也许我必须使用 relative 位置属性来按照我想要的方式显示它？但是，我确实知道应该使用 float 属性，但它对我不起作用。我试过使用另一个 div(logoAndMainMenu-Wrapper) 为文本和 ul 创建一个包装器，但是 float 属性仍然无法正常工作....

这是我的 HTML:

<div id="topbar">
     <div class="fixedWidth1">
        <div class="logoAndMainMenu-Wrapper">
        <p>The Official Website of<br />
        <span id="AndrewVuText">Andrew Vu</span></p>
        <ul>
           <li><a href="#" target="_blank">HOME</a></li>
           <li><a href="#" target="_blank">ABOUT</a></li>
           <li><a href="#" target="_blank">PROJECTS</a></li>
           <li><a href="#" target="_blank">COLLABORATE</a></li>
           <li><a href="#" target="_blank">CONTACT</a></li>
        </ul>
     </div> <!-- Logo & Main Menu Wrapper DIV -->
   </div> <!-- Fixed Width 1 DIV -->
</div> <!-- Top Bar DIV -->

这是我的 CSS:

#AndrewText  {
    font-size: 2em;
}

.fixedWidth1  {
    margin: 0 auto;
    width: 1000px;
    height: 150px;
    background-color: green;
    border: 2px solid black;
}

.logoAndMainMenu-Wrapper  {
    border: 2px solid yellow;
}

.fixedWidth1 ul  {
    list-style-type: none;
    text-align: center;
    margin: 0;
    background-color: green;
    border: 2px solid orange;
}

.fixedWidth1 ul li  {
    display: inline; /* LI are horizontal */
    padding: 5px;
    border-right: 2px solid yellow;
}

.fixedWidth1 ul li a  {
    text-decoration: none; /* No UNDERLINE */
}

/* Normal, unvisited link */
.fixedWidth1 ul li a:link  {
    color: #FFFFFF;
}

/* Visited link */
.fixedWidth1 ul li a:visited {
    color: #FFFFFF;
}

/* Mouse over link */
.fixedWidth1 ul li a:hover {
    color: yellow;
}

/* Selected link */
.fixedWidth1 ul li a:active {
    color: #FFFFFF;
}

任何帮助都可以。谢谢!!!

Answer 1

你好，现在定义你的 p 标签 float left .logoAndMainMenu-Wrapper 定义这个 overflow hidden 等这个

.logoAndMainMenu-Wrapper>p{
    float:left;
}
.logoAndMainMenu-Wrapper{overflow:hidden;}

Demo