Блог

Главная - Вопросы по программированию - как сделать, чтобы нижняя часть занимала всю ширину страницы в ionic 3

как сделать, чтобы нижняя часть занимала всю ширину страницы в ionic 3

#html #css #ionic-framework

#HTML #css #ionic-framework

Вопрос:

На изображении ниже я хочу, чтобы индикатор, такой как normal и т.д., покрывал всю ширину страницы. я хочу, чтобы индикатор был гладким и не имел пробелов. фон также должен быть прозрачным. теперь он показывает что-то вроде беловатого цвета. Я использую ionic 3 и angular 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>

мое изображение

Комментарии:

1. пожалуйста, добавьте ссылку на рабочий код. Спасибо

2. приведенный выше код предназначен только для той части, которая мне нужна, то есть для индикаторов с текстовыми полями, а не для вкладок.

Ответ №1:

добавлено ваше span css в li , width: 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>