所以我希望它向右浮动，但我希望文本和一张图片(我还没有转向链接)排成一行。
HTML代码:
<html>
<title>Home - Welcome to Micro Skills!</title>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
<div id="header" class="header">
<div class="container">
<div class="logo">
<h1><img src="microskills_logo.jpg" width="275" height="106" alt="Logo - Micro Sills"></h1>
</div>
<div class="navBar">
<ul>
<b>
<li><img src="home_icon.jpg" width="256" height="256" alt="Home" class="home_icon"></li>
<li>About Us</li>
<li>Events</li>
<li>Get Involved</li>
<li>Contact Us</li>
</b>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<p>Welcome to the Community MicroSkills Development Centre website.
Since 1984, we have been serving communities in the Greater Toronto Area. As a non-profit, charitable organization, we strive to achieve excellence in our service delivery to women, newcomers to Canada, youth and other community members who trust us to support them in improving their economic and social well-being.
Community MicroSkills Development Centre is a multi-cultural, non-profit, community based organization committed to assisting the unemployed, with priority to women, racial minorities, youth and immigrants. Recognizing barriers that immigrants, racial minority, youth and women face in their efforts towards self-sufficiency, MicroSkills aims to enable them to participate more fully in Canadian society and assist them in acquiring the skills needed to achieve self-determination and economic, social and political equality.
Our programs are designed to assist the unemployed, with priority to women, racial minorities, youth and immigrants achieve career and personal goals. Clients can choose as many services as required to help them on their way to becoming self-reliant and economically self-sufficient.</p>
</div>
</div>
</html>
CSS 代码:
@charset "utf-8";
/* CSS Document */
body{
width:100%;
margin:auto;
}
.container{
width:85%;
margin:auto;
}
.header{
background-color:#900;
width:100%;
height:17%;
top:0;
position:fixed;
text-decoration:none;
}
.logo{
float:left;
}
.navBar{
float:right;
height: 10px;
}
li{
float:left;
margin-left:2%;
padding-top:20px;
color:#FFF;
text-transform:uppercase;
font-size:12px;
font-stretch:ultra-condensed;
padding-right:0;
}
.content{
padding-top:20%;
}
.home_icon{
height:50px;
width:50px;
}
我想要相同的定位，但我想将“navBar”中的文本和图像稍微向左移动，以便将所有内容排成一行。
最佳答案
您应该将 width 属性添加到您的 .navBar CSS。
http://codepen.io/calebanth/pen/KrZBXo
.navBar {
float: right;
height: 10px;
width: 30%;
}
关于html - 我怎样才能通过将它们稍微向左移动来在右侧容纳更多链接而不只挤在一行中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38625447/