Question

我有一个列的引导程序表，每个单元格包含两个带文本和按钮的div。

在Chrome中，单元格内容按预期在一行中呈现

但在firefox中，单元格内容呈现为“两行”

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源代码中的电子邮件之前显示按钮。这将使它们在所有浏览器中适当浮动。

css内联块在Firefox中不起作用

2 个答案: