標題文本框與其他框對齊

我想調整這個代碼，以使標題文本框與其他三個文本框下方排列，但我無法得到它的權利標題文本框與其他框對齊

body { 
 
    background: #ccc; 
 
    font-family: 'Arial', sans-serif; 
 
} 
 

 
div { 
 
    position: relative; 
 
    margin: 0px auto; 
 
    margin-bottom: 30px; 
 
    border: 1px solid #333; 
 
} 
 

 
.container-head img { 
 
    display: block; 
 
    margin: 0px auto; 
 
    width: &60 
 
} 
 

 
.container-first { 
 
    background: #eee; 
 
} 
 

 
.container-second { 
 
    background: #fff; 
 
} 
 

 
.container-third { 
 
    background: #eee; 
 
} 
 

 
.container-first, 
 
.container-second, 
 
.container-third { 
 
    padding: 10px 10px; 
 
    width: 760; 
 
}

<div class="container-head"> 
 
    <img src="http://media.eloqua.com/designimages/new-oracle-logo2.png" /> 
 
</div> 
 
<div class="container-first"> 
 
    <p>first</p> 
 
</div> 
 
<div class="container-second"> 
 
    <p>second</p> 
 
</div> 
 
<div class="container-third"> 
 
    <p>third</p> 
 
</div>

來源

2017-04-22 DSanni

具體什麼錯在何處？請幫助澄清你想達到的目標。 – showdev

將寬度添加到容器頭760px;

<html> 
<head> 
<title>Eloqua HTML Test</title> 
<style type="text/css"> 
    body { background:#ccc; font-family:'Arial', sans-serif; } 
    div { position:relative; margin:0px auto; margin-bottom:30px; border:1px solid #333; } 
    .container-head img { display:block; margin:0px auto; width:&60} 
    .container-first { background:#eee; } 
    .container-second { background:#fff; } 
    .container-third { background:#eee; } 
    .container-first, .container-second, .container-third,.container-head{ padding:10px 10px; width:760;} 
</style> 
</head> 
<body> 
<div class="container-head"> 
<img src="http://media.eloqua.com/designimages/new-oracle-logo2.png" /> 
</div> 
<div class="container-first"> 
<p>first</p> 
</div> 
<div class="container-second"> 
<p>second</p> 
</div> 
<div class="container-third"> 
<p>third</p> 
</div> 
</body></html>

這裏

.container-first, .container-second, .container-third,.container-head{ padding:10px 10px; width:760;}

來源

2017-04-22 18:39:47

你要水平顯示他們呢？如果是這樣那麼使用導航條..更改內容

<nav class="navbar navbar-inverse navbar-fixed-top"> 
<div class="container-fluid"> 
<div class="navbar-header"> 
    <a class="navbar-brand" href="#">WebSiteName</a> 
</div> 
<ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">Page 1</a></li> 
    <li><a href="#">Page 2</a></li> 
    <li><a href="#">Page 3</a></li> 
</ul> 
</div> 
</nav>

或者如果你想改變圖像塊的同其他三個大小

然後用

<div class="container-head" style="width:58%;" > 
<img src="http://media.eloqua.com/designimages/new-oracle-logo2.png" /> 
</div>

來源

2017-04-22 18:49:24 Rohaitas

所有塊的USE百分比（％）..它會使它更好.. – Rohaitas

標題文本框與其他框對齊

回答

相關問題