Мой 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(/"/ig, '"'));
for (i =0;i<6;i++){
if (val[i])
document.querySelector("#filter"+i +" option[value="+val[i]+"]").selected=true;
}
</script>