HTML＆CSS：浮動屬性問題

Question

我有一個問題，在一些文字旁邊出現了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 tag float left .logoAndMainMenu-Wrapper定義此overflow hidden ，就像這樣

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

演示版