Horizontaal uitgelijnd testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

Horizontaal uitgelijnd

Visueel voorbeeld:

HTML-voorbeeld:

<div class="horizontal-view">
  <button class="ghost">Terug</button>
  <button>Verder</button>
</div>

HTML-structuur-voorbeeld:

<div class="horizontal-view">
  <!-- horizontaal uit te lijnen content -->
</div>

Object met horizontaal uitgelijnde elementen

Visueel voorbeeld:

HTML-voorbeeld:

<div class="horizontal-view-group">
  <div>
    <button class="ghost">Terug</button>
    <button>Verder</button>
  </div>

  <div>
    <button class="ghost">Terug</button>
    <button>Verder</button>
  </div>
</div>

HTML-structuur-voorbeeld:

<div class="horizontal-view-group" id="horizontal-view-group">
  <div>
      <!-- horizontaal uit te lijnen content -->
  </div>

  <div>
     <!-- horizontaal uit te lijnen content -->
  </div>
</div>

Horizontaal uitgelijnd formulier

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post" class="horizontal-view">
  <div>
    <label for="form-example-horizontal">Voorbeeld text input</label>
    <input id="form-example-horizontal" name="form-example-horizontal"type="text">
  </div>
  <div>
    <label for="form-example-horizontal-2">Voorbeeld text input</label>
    <input id="form-example-horizontal-2" name="form-example-horizontal-2" type="text">
  </div>
  <button type="submit">Verzend</button>
</form>

Horizontaal uitgelijnd formulier fieldset

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post" class="horizontal-view">
  <fieldset>
    <legend>Lorem ipsum</legend>
    <div>
      <label for="form-example-horizontal-fieldset">Voorbeeld text input</label>
      <input id="form-example-horizontal-fieldset" name="form-example-horizontal-fieldset" type="text">
    </div>
    <div>
      <label for="form-example-horizontal-fieldset-2">Voorbeeld text input</label>
      <input id="form-example-horizontal-fieldset-2" name="form-example-horizontal-fieldset-2" type="text">
    </div>
  </fieldset>
  <button type="submit">Verzend</button>
</form>