Question

我设置了一个顶级页面，我希望在浏览器变大或变小时，使每个“按钮”（.contain）的宽度扩展或压缩。

我看到了一个非常好的解决方案，使用浮动，但在我的情况下，这不起作用，因为添加这导致按钮停止并排显示;我用内联块解决了一些问题。

我需要一种方法来保持按钮并排，并使用浏览器窗口调整宽度。有什么建议？我的代码如下：

#topbar {
  width: 100%; 
  height: 38px;
  border-bottom: 1px solid #e2c4ff;
  position: fixed;
  z-index: 10;
  top: 0px;
  left: 0px;
  text-align: center;
}

.toppage {
  white-space: nowrap;
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translate(0%, -50%);
}

.contain {
  display: inline-block;
  white-space: normal;
  padding-left: 12px;
  padding-right: 12px;
  height: 38px;
  background-color: #fff;
  border-right: 1px solid #e2c4ff;
}

<div id="topbar">
  <div class="toppage">
    <div class="contain">hello</div>
    <div class="contain">goodbye</div>
    <div class="contain">what are we doing?</div>
    <!---->
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
    <div class="contain">what are we doing?</div>
  </div>
</div>

Answer 1

我相信如果您将display: flex; justify-content: center;width: 100%;提供给.toppage，这将有效。

Answer 2

只要内部（文本，在你的情况下）内部没有出现，容器的收缩就很有用。您可以使用Media Queries制作响应式容器，但内部文本将保持相同的大小。这就是为什么当页面大小减小时，容器会滑落，因为内部的文本具有相同的 font-size 。

正如我提出的那样，这个问题可以通过两种方式解决：

1：硬编码CSS媒体查询要更改 font-size

这需要大量的猜测工作，您必须使用许多@media规则才能解决问题。仅当您不想在页面中加入script时才使用此选项。

2：使用JavaScript处理 font-size

这是我能想到的最佳解决方案。您可以使用JS（我使用jQuery）来更改contain div中文本的字体大小。虽然这种方法也需要很少的硬编码。以下是示例代码：

<强> HTML：

<div id="container">
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
    <div class="contain">Button</div>
</div>

请记住：当您将任何文本的字体大小更改为1px时，组成文本的所有字符的大小都会增加1px。因此：

<强> JavaScript的：

$(document).ready(function() {
    $(window).resize(function() {
        var window_width = $(window).width();
        var contain_count = 10*6; // 10 contain elements * 6 characters of text 'button'
        var ratio = window_width/contain_count;
        $('.contain').css('font-size',ratio+'px')
    });
});

因此，如果你想要并排按钮，你也必须减少它们的字体大小。

Answer 3

不要将ROWNUM用于position: absolute。对于.toppage，请使用一定宽度的百分比。它应该工作。

Answer 4

我决定解决这个问题：http://www.w3schools.com/css/css_navbar.asp。它并没有像我想的那样做，但它看起来很干净，而且代码比我原来的更整洁。

使子div在父级内扩展和压缩

4 个答案: