如何在离子中创建全宽条？

Question

我不知道如何设计这样的Created by wireframe

我希望我的酒吧像蓝色一样填充，触摸屏幕的两端。

但我无法做到，我只能这样做real design application

怎么做？

这是我的代码

<div>
<ion-navbar>
<ion-title style="text-align:center;">Reporting Problem</ion-title>
</ion-navbar>
</div>

Answer 1

请参阅下面的示例。如果您对margin-left的{​​{1}}和margin-right发表评论，您会看到nav实际尺寸较小，因为nav（父级）有wrapper

希望您知道如何使用浏览器的检查元素。

＆＃13;

＆＃13;

padding: 20px

＆＃13;

.wrapper{
 width: 200px;
 height: 300px;
 border: 1px solid silver;
 padding: 20px;
}
nav{
  background-color: #0095ff;
  coloR: white;
  padding: 10px;
  margin-bottom: 20px;
  margin-left: -20px;
  margin-right: -20px;
}
.wrapper>div{
  width: 85px;
  border: 1px solid black;
  padding: 5px;
  background-color: grey;
  float: left;

}

＆＃13;

＆＃13;

＆＃13;