54

我创建了一个站点，因此当您单击 30px 按钮时，它会更改div.

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

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

4

6 回答 6

73

试试下面的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 动态更改以确保内容放置完美。

于 2013-01-25T16:34:50.663 回答
1

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

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

除了你的高度和宽度属性

于 2013-01-25T16:33:22.977 回答
0

那是按钮的自然行为。您可以尝试在父容器上放置一个最大宽度/最大高度，但我不确定是否会这样做。

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

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

padding: 0;
于 2013-01-25T16:33:31.833 回答
-1 
<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;
      }
于 2016-09-23T07:48:30.110 回答
-3

使用这种风格

<div class="form-control"
     style="height:100px;
     width:55%;
     overflow:hidden;
     cursor:pointer">
</div>
于 2014-09-26T12:16:52.723 回答
-3 
<div class="ai">a b c d e f</div> // something like ~100px
<div class="ai">a b c d e</div> // ~80
<div class="ai">a b c d</div> // ~60 

<script>

function _reWidthAll_div(classname) {

var _maxwidth = 0;

    $(classname).each(function(){

    var _width = $(this).width();

    _maxwidth = (_width >= _maxwidth) ? _width : _maxwidth; // define max width
    });    

$(classname).width(_maxwidth); // return all div same width

}

_reWidthAll_div('.ai');

</script>
于 2019-05-31T22:26:55.003 回答