Question

我有一个HTML表单，它有两个按钮。其中一个按钮仅在变量为真时显示（我正在使用React）。

<form>
            {this.state.classificationSelected == true
              ?
              <div>
              <ListAddition classification={this.props.categories[this.state.categoryIndex].classes[this.state.classificationIndex]} ref="listAddition"/>
              <button type="submit" onClick={this.handleSubmit} className="btn btn-default">Submit</button>
              </div>
              :
              <div></div>
              }
              <button type="button" className="btn btn-danger" data-dismiss="modal" onClick={this.closeModal}>Close</button>
    </form>

我希望按钮水平对齐。但是，它们出现在另一个之下：

如何对齐两个按钮？

Answer 1

name

这应该有所帮助。

<form>
        {this.state.classificationSelected == true
          ?
          <div style={{float:'left'}}>
          <ListAddition classification={this.props.categories[this.state.categoryIndex].classes[this.state.classificationIndex]} ref="listAddition"/>
          <button type="submit" onClick={this.handleSubmit} className="btn btn-default">Submit</button>
          </div>
          :
          <div></div>
          }
          <button style={{float:'left'}} type="button" className="btn btn-danger" data-dismiss="modal" onClick={this.closeModal}>Close</button>
</form>

或者这......

<强>解释

默认情况下，元素有display：block style witch表示它没有浮动，并且在它之前应用了break行。

Answer 2

您可以使用ng-show =＆＃34;表达式＆＃34;，并根据您的表达式，您可以根据您的要求显示和隐藏该按钮。参考链接：

https://docs.angularjs.org/api/ng/directive/ngShow

Answer 3

我认为你正在使用bootstrap。你可以这样做：

<div class="row" >
    <form>
                {this.state.classificationSelected == true
                  ?
                  <div class="col-md-6" >
                  <ListAddition classification={this.props.categories[this.state.categoryIndex].classes[this.state.classificationIndex]} ref="listAddition"/>
                  <button type="submit" onClick={this.handleSubmit} className="btn btn-default">Submit</button>
                  </div>
                  :
                  <div></div>
                  }

                  <div class="col-md-6" >
        <button type="button" className="btn btn-danger" data-dismiss="modal" onClick={this.closeModal}>Close</button>
                  </div>
        </form>
</div>

Answer 4

只需用spans（内联元素）替换你的div（块级元素），或者完全删除它们。

<form>
    <button type="submit" onClick={this.handleSubmit} className="btn btn-default">Submit</button>: 
    <button type="button" className="btn btn-danger" ...>Close</button>
</form>

Answer 5

因为第一个按钮包含在块元素（<div>）中，所以它们不能在同一行上。一些可能的修复方法是：

为容器使用<span> s等内联元素
删除嵌套问题;将所有内容放在<div>中，以便<div>包装两个按钮。

示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <button type="submit" className="btn btn-default">Submit</button>
</span>
<span></span>
<button type="button" className="btn btn-danger" data-dismiss="modal">Close</button>

{this.state.classificationSelected == true
?
<div>
  <ListAddition classification={this.props.categories[this.state.categoryIndex].classes[this.state.classificationIndex]} ref="listAddition"/>
  <button type="submit" onClick={this.handleSubmit} className="btn btn-default">Submit</button>
  <button type="button" className="btn btn-danger" data-dismiss="modal" onClick={this.closeModal}>Close</button>
</div>
:
<div>
  <button type="button" className="btn btn-danger" data-dismiss="modal" onClick={this.closeModal}>Close</button>
</div>
}

在不同的嵌套级别对齐按钮

5 个答案: