snipt

Ctrl+h for KB shortcuts

HTML

Vertically align labels even for wrapping lines

label {
  display: block;
  padding-left: 15px;
}

input[type="checkbox"] {
  float: left;
  width: 13px;
  margin-top: 3px;
}

<div class="form-item">
  <input type="checkbox" name="tid_1[]" id="edit-tid-1-2" value="2"  multiple="multiple" name="tid_1[]" />
  <label class='option' for='edit-tid-1-2'>Education</label>
</div>
https://snipt.net/embed/d5df5feefcbdde3b53617172d58a4d06/
/raw/d5df5feefcbdde3b53617172d58a4d06/
d5df5feefcbdde3b53617172d58a4d06
html
HTML
15
2019-07-21T11:12:58
True
False
False
/api/public/snipt/40124/
vertically-align-labels-even-for-wrapping-lines
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>label { </span><span id="L-2"><a name="L-2"></a> display: block; </span><span id="L-3"><a name="L-3"></a> padding-left: 15px; </span><span id="L-4"><a name="L-4"></a>} </span><span id="L-5"><a name="L-5"></a> </span><span id="L-6"><a name="L-6"></a>input[type=&quot;checkbox&quot;] { </span><span id="L-7"><a name="L-7"></a> float: left; </span><span id="L-8"><a name="L-8"></a> width: 13px; </span><span id="L-9"><a name="L-9"></a> margin-top: 3px; </span><span id="L-10"><a name="L-10"></a>} </span><span id="L-11"><a name="L-11"></a> </span><span id="L-12"><a name="L-12"></a><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;form-item&quot;</span><span class="p">&gt;</span> </span><span id="L-13"><a name="L-13"></a> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;tid_1[]&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;edit-tid-1-2&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;2&quot;</span> <span class="na">multiple</span><span class="o">=</span><span class="s">&quot;multiple&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;tid_1[]&quot;</span> <span class="p">/&gt;</span> </span><span id="L-14"><a name="L-14"></a> <span class="p">&lt;</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">&#39;option&#39;</span> <span class="na">for</span><span class="o">=</span><span class="s">&#39;edit-tid-1-2&#39;</span><span class="p">&gt;</span>Education<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span><span id="L-15"><a name="L-15"></a><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></pre></div> </td></tr></table>
drupal, exposed_filters, views