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

I made a site so when you click the button 30px it changes the font inside the div.

我做了一个网站，当你点击30px按钮时它会改变div里面的字体。

I have a ul inside it with the bottons. When I change the size of font the div expands and the nav buttons move with it as well.

我在里面放了一个ul认证。当我改变字体大小时div会展开，导航按钮也会随之移动。

How do i make it so it stays fixed but the fonts can still change.

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

6 个解决方案

#1

try the following css

试试下面的css

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

This makes the div take as little space as possible, and it's width is defined by the css.

这使得div尽可能少地占用空间，而且它的宽度由css定义。

// Expanded answer

/ /扩展的答案

To make the buttons fixed widths do the following :

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

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

However, you should be aware that as the size of the text changes, you need more space to display it. As such, it's natural that the containers need to expand. You should perhaps review what you are trying to do; and maybe have some predefined classes that you alter on the fly using javascript to ensure the content placement is perfect.

但是，您应该知道，随着文本大小的变化，您需要更多的空间来显示它。因此，容器需要展开是很自然的。也许你应该回顾一下你正在做的事情;还可以使用javascript动态修改一些预定义类，以确保内容的放置是完美的。

#2

you can give it a max-height and max-width in your .css

您可以在.css中给它设置最大高度和最大宽度

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

in addition to your height and width properties

除了你的身高和宽度属性

#3

Thats the natural behavior of the buttons. You could try putting a max-width/max-height on the parent container, but I'm not sure if that would do it.

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

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

The other option would be to use the devlopr tools and see if you can remove the natural padding.

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

padding: 0;

#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;
      }

#5

-2

Use width style.

使用宽度样式。

CSS:

div {
    width:50px;
}

HTML

<div style="width:50px">Hello world</div>

#6

-2

Use this style

使用这种风格

<div

                class="form-control"

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

#1