Question

我正在尝试构建一个简单的页面布局，顶部有水平滚动标签，底部内容垂直滚动。

我设法让垂直滚动工作，并让标签保持在顶部，但我无法让标签水平滚动。如何实现这一目标？

以下是我到目前为止的情况。为了简单起见，我删除了所有功能，我只是使用布局。我正在使用反应

反应成分：

var SimpleTabs = React.createClass({

    render: function(){
        var lorem = "Lorem ipsum dolor sit amet... ";
        var sampleText = lorem + lorem + lorem + lorem;

        return(
            <table className={"simple_tabs"}>
                <tr>
                    <td className={"tabsCell"}>
                        <div className={"tabs"}>
                            <span className={"tab"}>{"tab1"}</span>
                            <span className={"tab"}>{"tab2"}</span>
                            <span className={"tab"}>{"tab3"}</span>
                            <span className={"tab"}>{"tab4"}</span>
                            <span className={"tab"}>{"tab5"}</span>
                            <span className={"tab"}>{"tab6"}</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td className={"contentCell"}>
                        <div className={"content"}>
                            {sampleText}
                        </div>
                    </td>
                </tr>
            </table>
            );
    }
});

文件越少：

.simple_tabs {
  height: 100%;
  width: 100%;
}
.tabs > .tab {
  font-size: 20px;
  padding-left: 5px;
  padding-right: 15px;
}

.tabs{
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  height: 20px;
}

.tabsCell{
  height: 20px;
}

.contentCell .content {

  height:100%;
  overflow: scroll;
}

Answer 1

这里是一个working sample，带有普通的旧HTML。

您可能需要的一个额外内容是table-layout:fixed。

希望它会让你指向正确的方向：）

Answer 2

您必须将white-space: nowrap;添加到.tabs，以允许内部元素溢出容器。

.tabs{
    white-space: nowrap;
    overflow: auto;
}

创建一个水平滚动分区

2 个答案: