Span кнопки на противоположных сторонах с помощью CSS только

У меня есть эти две кнопки на моем модальный, которые позволяют пользователю следующий шаг или перезапустить прогресс формы.

Я хочу, чтобы переключить SPAN эти кнопки на всю ширину модального и я попытался следующий код:

<div className="form-button"> 
    <button className="btn btn-secondary btn-width-75 reset-button" onClick={this.resetFilter.bind(this)}><img alt="Revise recommendations" src="/img/icons/redo.svg" className="button-image"/>Restart</button> 
    <button className="btn btn-secondary btn-width-75 next-button" onClick={this.nextButton.bind(this)}>Next<i className="icon-right"></i></button> 
</div>

и мой CSS:

.form-button { 
    width: 500px; 
    display:inline-block; 
    overflow: auto; 
    white-space: nowrap; 
    margin:0px auto; 
} 

.reset-button { 
    float: left; 
} 

.next-button { 
    float: right; 
}

Мой ожидаемый результат является:

|| <RestartButton>  --modal width--   <NextButton> ||

Как это сделать?

источник

2017-02-07 anonn023432

Что с 'className's? Атрибут «class». – TricksfortheWeb

@TricksfortheWeb, пожалуйста, игнорируйте 'className', это просто потому, что я использую React для моего front-end с mixins, извините, должен был уточнить ранее. – anonn023432

Ну, смена класса className на' class' работала на скрипке. – TricksfortheWeb

Измените className s к class эс, и он будет работать: https://jsfiddle.net/yak613/yndrnvvo/

<div class="form-button"> 
    <button class="btn btn-secondary btn-width-75 reset-button" onClick={this.resetFilter.bind(this)}>Restart</button> 
    <button class="btn btn-secondary btn-width-75 next-button" onClick={this.nextButton.bind(this)}>Next<i class="icon-right"></i></button> 

</div>

источник

2017-02-07 22:10:16 TricksfortheWeb

Я проверил свой код, на самом деле я переопределял css из-за CSS, который применялся на каждой вторичной кнопке из-за моего модального. Наверное, это наводит на правильный ответ: P – anonn023432

.form-button { 
 
    width: 500px; 
 
    display: flex; 
 
    overflow: auto; 
 
    white-space: nowrap; 
 
    margin: 0 auto; 
 
    justify-content: space-between; 
 
    background-color: #eee; 
 
}

<div class="form-button"> 
 
    <button class="btn btn-secondary btn-width-75 reset-button" onClick={this.resetFilter.bind(this)}> 
 
    <img alt="" src="/img/icons/redo.svg" class="button-image" />Restart</button> 
 
    <button class="btn btn-secondary btn-width-75 next-button" onClick={this.nextButton.bind(this)}>Next<i className="icon-right"></i> 
 
    </button> 
 
</div>

источник

2017-02-07 22:14:53

Span кнопки на противоположных сторонах с помощью CSS только

ответ

Смежные вопросы