CSS內聯塊在Firefox中不起作用

Question

我有一個一列的引導程序表，每個單元格包含帶有文本和按鈕的兩個div。

在Chrome中，單元格內容按預期呈現在一行中

但在Firefox中，單元格內容“分成兩行”呈現

jsfiddle

html

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

javascript

var data = [{"id":"973","email":"usr3@usr3.com"},{"id":"17f","email":"prom3@prom3.com"},{"id":"29e","email":"prom8@prom8.com"}];

class TableRowButtons extends React.Component {

    constructor(props) {
        super(props);

        this._handleDeleteClick = this._handleDeleteClick.bind(this);
        this._handleResetClick = this._handleResetClick.bind(this);
        this._handleEditClick = this._handleEditClick.bind(this);
    }

    _handleDeleteClick(e){
        console.log(e);
    }

    _handleResetClick(e){
        console.log(e);
    }

    _handleEditClick(e){
        console.log(e);
    }

    render() {

        return (
            <div className="row-container">
                <div className="row-text-container">
                    {this.props.cellContent}
                </div>
                <div className="row-buttons-container">
                    <button className="btn btn-danger btn-xs" onClick={this._handleDeleteClick}>Delete</button>
                    <button className="btn btn-warning btn-xs" onClick={this._handleResetClick}>Reset Password</button>
                    <button className="btn btn-info btn-xs" onClick={this._handleEditClick.bind}>Edit</button>
                </div>
            </div>
        );
    }
}

class TestTable extends React.Component{

  constructor(props) {
        super(props);

        this._handleEditClick = this._handleEditClick.bind(this);
        this._handleResetClick = this._handleResetClick.bind(this);
        this._handleDeleteClick = this._handleDeleteClick.bind(this);
        this._handleRowClick = this._handleRowClick.bind(this);
    }

    _handleRowClick(row){
        console.log(row);
    }

  _handleDeleteClick(rowContent){
        console.log(rowContent);
    }

    _handleResetClick(rowContent){
        console.log(rowContent);
    }

    _handleEditClick(rowContent){
        console.log(rowContent);
    }

  render(){

    var that = this;

    function onAfterTableComplete(){

        }

        const options = {
            onRowClick: this._handleRowClick,
            afterTableComplete: onAfterTableComplete
        };

    function rowFormatter(cell, row){
            return <TableRowButtons
                    cellContent={cell}
                    rowContent={row}
                    onDeleteClick={that._handleDeleteClick}
                    onResetClick={that._handleResetClick}
                    onEditClick={that._handleEditClick}
                    />;
        }

     return (
       <BootstrapTable
                    data={data}
                    striped={true}
                    hover={true}
                    condensed={true}
                    pagination={true}
                    search={true}
                    options={options}>
                    <TableHeaderColumn
                        isKey={true}
                        dataField="email"
                        width="200"
                        dataSort={true}
                        dataFormat={rowFormatter}>Email</TableHeaderColumn>
                </BootstrapTable>
     );
  }

}

ReactDOM.render(
  <TestTable />,
  document.getElementById('container')
);

的CSS

.btn-danger {
    margin-right: 0;
  }

  .btn-warning, .btn-info{
    margin-right: 5px;
  }

  td .btn{
    float: right;
  }

  .row-container{
  display: inline-block;
  width: 100%;
  }

  .row-container div{
    display: inline-block;
  }

  .row-buttons-container{
    float: right;
    width: 200px;
  }

Answer 1

我看到的問題是white-space: nowrap;
更改它，也許會有所幫助。

Answer 2

我要說Firefox在這一點上是正確的。

讓我們看一下刪除float會得到什么。 你有這樣的事情：

email@example.com
[編輯] [重置密碼] [刪除]

這是因為它們是<div>元素，因此是塊。

然后將float:right應用於按鈕集。 我的問題是：您為什么期望按鈕向上移動？ 它們應該（並且在Firefox中確實）僅向右移動。

為了獲得所需的效果，請考慮使按鈕出現在HTML源中的電子郵件之前。 這將使它們在所有瀏覽器中正確浮動。