HTML和CSS：浮动属性问题

我有一个问题，在文本旁边浮动ul。HTML和CSS：浮动属性问题

以下是图像：

enter image description here

我想，也许我不得不使用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; 
}

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

来源

2014-10-06 user3385997

你有设置在UL明确的宽度是多少？没有人，浮动将无法正常生效。 – Jon 2014-10-06 04:57:12

我想你可能是这个http://jsfiddle.net/j8cq1neL/ – 2014-10-06 04:57:15

嗨现在定义p tagfloat left.logoAndMainMenu-Wrapper定义这个overflow hidden和这样

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

Demo

来源

2014-10-06 04:58:53

HTML和CSS：浮动属性问题

回答

相关问题