Question

我创建了一个网站，所以当你点击30px按钮时，它会改变div内的字体。

我的内部有一个ul。当我更改字体大小时，div会展开，导航按钮也随之移动。

我如何制作它以使其保持固定但字体仍然可以改变。

Answer 1

尝试以下css：

#innerbox
{
   width:250px; /* or whatever width you want. */
   max-width:250px; /* or whatever width you want. */
   display: inline-block;
}

这使得div占用的空间尽可能小，其宽度由css定义。

//扩大回答

要使按钮固定宽度，请执行以下操作：

#innerbox input
{
   width:150px; /* or whatever width you want. */
   max-width:150px; /* or whatever width you want. */
}

但是，您应该知道，随着文本大小的变化，显示它所需的空间也会发生变化。因此，容器需要扩展是很自然的。你应该回顾一下你想要做的事情;并且可能有一些预定义的类，您可以使用javascript动态更改，以确保内容放置完美。

Answer 2

你可以在.css中给它一个最大高度和最大宽度

.fontpixel{max-width:200px; max-height:200px;}

除了你的身高和宽度属性

Answer 3

这就是按钮的自然行为。您可以尝试在父容器上放置max-width / max-height，但我不确定是否会这样做。

max-width:something px;
max-height:something px;

另一种选择是使用devlopr工具，看看你是否可以删除天然填充。

padding: 0;

Answer 4

<div>
  <img src="whatever it is" class="image-crop">
</div>

 /*mobile code*/
    .image-crop{
      width:100%;
      max-height: auto;
     }
    /*desktop code*/

  @media screen and (min-width: 640px) {
    .image-crop{
       width:100%;
       max-height: 140px;
      }

Answer 5

<div class="ai">a b c d e f</div>
<div class="ai">a b c d e</div>
<div class="ai">a b c d</div>

<script>
function _w(a) {
var _maxw = 0;
    $(a).each(function(){
    var _w = $(this).width();
    _maxw = (_w >= _maxw) ? _w : _maxw;
    });
$(a).width(_maxw);
}
_w('.ai');</script>

Answer 6

使用此风格

<div class="form-control"
     style="height:100px;
     width:55%;
     overflow:hidden;
     cursor:pointer">
</div>

如何使div具有固定的大小？

6 个答案: