Question

在下面的图像中，我希望指示器（如正常等）覆盖页面的整个宽度。我希望指示器平滑且没有任何空格。背景也应该是透明的。现在它显示出类似白色的颜色。我正在使用离子3和角4。我的.css页面

.map_legend{
  background: transparent !important;
    .legend_title{
        margin: 4px;
        font-size:  1.0rem;
    }
    ul.legend_list{
       margin: 4px;
       padding: 0px;

        li{
            display:inline-block;
            margin-right: -4px;
            .legend_values{
                color:#ffffff; 
                padding: 7px; 
                font-size: 1.2rem;
                box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
                bottom: 0px;
                left: 0px;
            }
        }
    }
   }
my .html
      <div class="map_legend">

    <span class="legend_title" style="color: black;">{{"Heat Wave Alert" | 
translate}}</span>
    <ul class="legend_list"> 

      <li><span class="legend_values" style="background:green;">{{"Normal" | 
translate}}</span></li>
      <li><span class="legend_values" style="background:yellow; color: 
#333;">{{"Caution" | translate}}</span></li>
      <li><span class="legend_values" style="background:red;">{{"Extreme 
Caution" | translate}}</span></li>
      <li><span class="legend_values" style="background:black;">{{"No 
Forecast" | translate}}</span></li>
    </ul>
  </div>

my image

Answer 1

将span css添加到li，宽度：width: -webkit-fill-available;表示chrome，width: -moz-available;表示Firefox，display: flex表示ul

.map_legend {
  background: transparent !important;
}

.map_legend .legend_title {
  margin: 4px;
  font-size: 1rem;
}

.map_legend ul.legend_list {
  margin: 4px;
  padding: 0px;
  display: flex;
  text-align: center;
}

.map_legend ul.legend_list li {
  display: inline-block;
  margin-right: -4px;
  color: #fff;
  padding: 7px;
  font-size: 1.2rem;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  bottom: 0px;
  width: -webkit-fill-available;
  width: -moz-available;
}

<div class="map_legend">

  <span class="legend_title" style="color: black;">{{"Heat Wave Alert" | 
translate}}</span>
  <ul class="legend_list">

    <li style="background:green;"><span class="legend_values">Normal
</span></li>
    <li style="background:yellow; color: 
#333;"><span class="legend_values">Caution</span></li>
    <li style="background:red;"><span class="legend_values">Extreme 
Caution</span></li>
    <li style="background:black;"><span class="legend_values">No 
Forecast</span></li>
  </ul>
</div>

如何在ionic 3中使脚套页面的整个宽度

1 个答案: