Исправление плавающего тега опции - PullRequest
0 голосов
/ 06 августа 2020

Мой HTML вид

У меня этот уродливый вид фильтров. Есть ли способ буквально исправить их положение, независимо от размера меток, которые я вставил. (PS эти фильтры были хорошо выровнены, но они перемещали позиции, когда я добавлял очень большие метки в раскрывающееся меню)

Вот стилистическая часть моего HTML кода:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <style>
         body {
         text-align:center;
         }
         h1 {
         color:#0099ff;
         }
         #filters{
             width:1000px;
             margin:auto;
         }
         #filters .row{
            margin:auto;
            display:flex;
         }
         #filters .selection label{
            width:100px;
         }
         #filters .selection{
            text-align: center;
            padding:10px;
         }
      </style>

А вот тег option моего html кода:

<form method="get" id="filters">
   <div class="row">
      <div class="selection">
         <label for="filter1">% Change</label>
         <select onchange="this.form.submit()" name="filter1" id="filter1">
            <option value="All">All</option>
            <option value="day3">Today +3%</option>
            <option value="day5">Today +5%</option>
            <option value="week5">Week +5%</option>
            <option value="week10">Week +10%</option>
            <option value="month10">Month +10%</option>
            <option value="month15">Month +15%</option>
            <option value="month20">Month +20%</option>
         </select>
      </div>
      <div class="selection">
         <label for="filter2">RSI</label>
         <select onchange="this.form.submit()" name="filter2" id="filter2">
            <option value="All">All</option>
            <option value="RSIthirty">RSI 30 (highly oversold)</option>
            <option value="RSIfifty">RSI 50 (oversold)</option>
         </select>
      </div>
      <div class="selection">
         <label for="filter3">Bollinger Band</label>
         <select onchange="this.form.submit()" name="filter3" id="filter3">
            <option value="All">All</option>
            <option value="BBUpperbandLimit">Stocks on Upper Band</option>
            <option value="BBLowerbandLimit">Stocks on Lower Band</option>
         </select>
      </div>
   </div>
   <div class="row">
      <div class="selection">
         <label for="filter4">20 SMA</label>
         <select onchange="this.form.submit()" name="filter4" id="filter4">
            <option value="All">All</option>
            <option value="HigherthantwentySMA">Stocks > 20 SMA</option>
         </select>
      </div>
      <div class="selection">
         <label for="filter5"><i class="fa fa-star" style="font-size:20px;color:gold;"></i>XrossTradingZone(XTZ)</label>
         <select onchange="this.form.submit()" name="filter5" id="filter5">
            <option value="All">All</option>
            <option value="Hammer" disabled>XrossTradingZone</option>
            <option value="Belthold" disabled>Upgrade to Advance Scan</option>
         </select>
      </div>
      <div class="selection">
         <label for="filter6"><i class="fa fa-star" style="font-size:20px;color:gold;"></i>SuperStock</label>
         <select onchange="this.form.submit()" name="filter6" id="filter6">
            <option value="All">All</option>
            <option value="Hammer" disabled>SuperStock</option>
            <option value="Belthold" disabled>Upgrade to Millionaire Scan</option>
         </select>
      </div>
   </div>
</form>
<br>
<div class="row">
   <table class="table table-striped" role="alert">
      <thead>
         <tr>
            <th scope="col">Name</th>
            <th scope="col">Open</th>
            <th scope="col">High</th>
            <th scope="col">Low</th>
            <th scope="col">Close</th>
            <th scope="col">Volume</th>
            <th scope="col">Change</th>
         </tr>
      </thead>
      <tbody>
         {% for i in filter %}
         <tr>
            <td>{{i.script}}</td>
            <td>{{i.open}}</td>
            <td>{{i.high}}</td>
            <td>{{i.low}}</td>
            <td>{{i.close}}</td>
            <td>{{i.Volume}}</td>
            <td>{{i.Change}}</td>
         </tr>
         {% endfor %}
   </table>
    {% include 'pagination.html' %}
</div>
</div>
</div>
<script>
   var val=JSON.parse("{{dropdown}}".replace(/&quot;/ig, '"'));
   for (i =0;i<6;i++){
       if (val[i])
           document.querySelector("#filter"+i +" option[value="+val[i]+"]").selected=true;
   }
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...