Question

我正在尝试调整此代码，使标题文本框与下面的其他三个文本框对齐，但我无法正确使用

＆＃13;

<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>

＆＃13;

var mongoose = require('mongoose');

var WorkSchema = mongoose.Schema({
Title:{
    type:String,
    required:true, 
    unique:true
},
   VideoURL:String,
   Image: { data: Buffer, contentType: String },
   Price:Number,
   Username:String,
   Company_id:[{type:mongoose.Schema.Types.ObjectId, ref:'Company'}]

});

var Work = module.exports = mongoose.model("Work", WorkSchema);

＆＃13;

Answer 1

添加宽度到容器头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;}

Answer 2

您想要水平显示它们吗？如果是，那么使用NAVBAR ..更改您的内容

<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>

OR

如果要像其他三个一样更改图像块的大小，请使用

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

标题文本框与其他框对齐

2 个答案: