Question

我正在尝试通过使用{{button区域内的Semantic UI modal添加左对齐 actions 1}}元素，我上传了一个示例on jsfiddle，以便提供有关代码的更多详细信息：

container

但是，容器不能很好地应用对齐：当按钮左对齐时，它会与其他<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>丢失vertical alignment。

尽管已经阅读了Semantic UI文档，但我还没有找到任何实现对齐的方法。

非常感谢任何帮助。

Answer 1

在float: left上添加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>

语义UI：如何左对齐一个动作项？

1 个答案: