我試圖創建一個網站,在它的左邊是一個標志,在右邊是文字(在標志圖片旁邊),在導航欄上面有所有這些,但是我就是不能把它們放在任何位置!
半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)
.headerLogo{
float:left;
margin-top: 20px;
}
.headerText{
float:right;
margin:auto;
}
超文本標記語言
<div class="headerLogo">
<img src="Logo.gif" />
</div>
<div class="headerText">
<h1>Together, we can create change.</h1>
<p>Qui cu imperdiet temporibus, nam at autem falli, cum audire salutandi abhorreant
eu. No postea mollis lobortis pri. Natum pertinax consulatu eam an, an vix omnium
appellantur, tamquam petentium cotidieque ut pri. In sea aliquid omittantur.</p>
</div>
<nav>
<ul class="nav">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="volunteer.html">Volunteer</a></li>
<li><a href="donate.html">Donate</a></li>
</ul>
</nav>
要相應地設置,請嘗試使用如下樣式,將div作為相對位置。
.headerLogo {
float:left;
margin:auto;
display:inline-block;
}
.headerText {
margin-top: 10px;
margin-right: 20px;
float: right;
position: relative;
display:inline-block;
}
我對這個措辭有點困惑,但請看看這個解決方案,看看這是不是你的意思,否則我會編輯答案
http://jsfiddle.net/gLLa20yp/
img{
display: inline-block;
float: left;
width: 10%;
}
nav{
margin-top: 5%
}
.nav li{
display: inline-block;
margin-left: 15%;
}
如果你不想要水平菜單,就去掉最后一部分。
未來的工作:為了讓它看起來更好,我建議設置& ltp & gt元素并在圖像和文本之間留出邊距
只是需要設置clearfix,這是您尋求的結果嗎?
.headerLogo{
float:left;
margin-top: 20px;
width: 50%
}
.headerText{
float:right;
margin:auto;
width: 50%
}
.clearFix{ clear: both};
<div class="headerLogo">
<img src="Logo.gif" />
</div>
<div class="headerText">
<h1>Together, we can create change.</h1>
<p>Qui cu imperdiet temporibus, nam at autem falli, cum audire salutandi abhorreant
eu. No postea mollis lobortis pri. Natum pertinax consulatu eam an, an vix omnium
appellantur, tamquam petentium cotidieque ut pri. In sea aliquid omittantur.</p>
</div>
<div class="clearFix">
<nav>
<ul class="nav">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="volunteer.html">Volunteer</a></li>
<li><a href="donate.html">Donate</a></li>
</ul>
</nav>