Semantic UI inline button test
by Dominic Myers
HTML
<link rel="stylesheet" href="//oss.maxcdn.com/semantic-ui/2.0.4/semantic.min.css">
<script src="//oss.maxcdn.com/semantic-ui/2.0.4/semantic.min.js"></script>
<div class="ui segment">
<form id="theForm" class="ui form">
<!-- Sort of Works, but label and input seperated -->
<div class="field">
<label for="postalCode01">Postcode</label>
</div>
<div class="two fields">
<div class="twelve wide field">
<input type="text" id="postalCode01" value=""/>
</div>
<div class="four wide field">
<div class="ui fluid button" onclick="getLocations('Main');">Search for Address</div>
</div>
</div>
<!-- How it was orginally, looking dire -->
<div class="field">
<label for="postalCode02">Postcode</label>
<input type="text" id="postalCode02" value=""/>
</div>
<div class="field">
<div class="ui button" onclick="getLocations('Main');">Search for Address</div>
</div>
<!-- What I want, but looks odd, perhaps I'm missing a class for the button? -->
<div class="two fields">
<div class="twelve wide field">
<label for="postalCode03">Postcode</label>
<input type="text" id="postalCode03" value=""/>
</div>
<div class="four wide field">
<div class="ui fluid bottom button" onclick="getLocations('Main');">Search for Address</div>
</div>
</div>
<!-- This works but... empty label -->
<div class="two fields">
<div class="twelve wide field">
<label for="postalCode04">Postcode</label>
<input type="text" id="postalCode04" value=""/>
</div>
<div class="four wide field">
<label> </label>
<div class="ui fluid bottom button" onclick="getLocations('Main');">Search...