Semantic UI: How is it possible to left align an action item? - html

Question

I'm trying to add a left aligned button to a Semantic UI modal within the actions region, through using a container element, and I uploaded a sample on jsfiddle in order to give more details about the code:
<div id="modal" class="ui modal">
<i class="close icon"></i>
<div class="header">
Title
</div>
<div class="actions">
<div class="ui left aligned container">
<div class="ui button">
<i class="eraser icon"></i>
Clear
</div>
</div>
<div class="ui black deny button">
Cancel
</div>
<div class="ui approve positive right labeled icon button">
Submit
<i class="checkmark icon"></i>
</div>
</div>
</div>
However, the container doesn't well apply the alignment: while the button gets left aligned, it loses its vertical alignment with other action items.
I have not found any method on implementing the alignment, despite having read the Semantic UI documentation.
Any help will be greatly appreciated.

Answer 1

Add float: left on the left-aligned-container
.left-aligned-container {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.css">
<div id="modal" class="ui modal">
<i class="close icon"></i>
<div class="header">
Title
</div>
<div class="actions">
<div class="ui left-aligned-container">
<div class="ui button">
<i class="eraser icon"></i> Clear
</div>
</div>
<div class="ui black deny button">
Cancel
</div>
<div class="ui approve positive right labeled icon button">
Submit
<i class="checkmark icon"></i>
</div>
</div>
</div>
<script>
$('#modal').modal('show')
</script>