文字不能顯示在html中徽標的右側

Question

嗨，在下面的代碼右側的徽標文本希望顯示在一行中的所有三個選項。

預期輸出：

Logo        Welcome Guest  Free Register Login 

誰能幫助我

.logo { 
 
    float: left; 
 
} 
 
.logo a { 
 
    display: block; 
 
} 
 
.header { 
 
    margin: 10px 0; 
 
} 
 
.header-right ul li { 
 
    width: 52%; 
 
    float: right; 
 
}

<div class="header"> 
 
    <div class="container"> 
 
    <div class="logo"> 
 
     <a href="index.html"> 
 
     <img src="images/logo.gif" alt="" /> 
 
     </a> 
 
    </div> 
 

 
    <div class="header-right"> 
 
     <ul> 
 
     <li>Welcome Guest</li> 
 
     <li>Free Register</li> 
 
     <li>Login</li> 
 
     </ul> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    </div> 
 
</div>

Answer 1

的問題是，你是給float和width到每一個li。

你想這樣做到ul並給display: inline-blockli。

事情是這樣的..

.logo { 
 
    float: left; 
 
} 
 
.logo a { 
 
    display: block; 
 
} 
 
.header { 
 
    margin: 10px 0; 
 
} 
 
.header-right ul { 
 
    float: right; 
 
    width: 52%; 
 
} 
 
.header-right ul li { 
 
    display: inline-block; 
 
    margin-right: 30px; 
 
}

<div class="header"> 
 
    <div class="container"> 
 
    <div class="logo"> 
 
     <a href="index.html"> 
 
     <img src="images/logo.gif" alt="" /> 
 
     </a> 
 
    </div> 
 

 
    <div class="header-right"> 
 
     <ul> 
 
     <li>Welcome Guest</li> 
 
     <li>Free Register</li> 
 
     <li>Login</li> 
 
     </ul> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    </div> 
 
</div>

Answer 2

嘗試這樣的：Demo

.header-right{ 
    width: 52%; 
    float: right; 
} 

.header-right ul li { 
margin:0 20px; 
    display:inline-block; 
} 

Answer 3

更新你的風格是這樣的：

.header-right ul { 
    width: 52%; 
float: right; 
} 
.header-right ul li 
{display:inline; 
margin-right:15px; 
}