Как сделать div иметь фиксированный размер?

Я сделал сайт, поэтому, когда вы нажимаете кнопку 30px, он меняет шрифт внутри div.

У меня есть ul внутри него с пробками. Когда я меняю размер шрифта, расширяется div, а кнопки навигации также перемещаются вместе с ним.

Как сделать так, чтобы он оставался фиксированным, но шрифты все равно могут измениться.

Ответ 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, чтобы обеспечить идеальное размещение контента.

Ответ 2

вы можете дать ему максимальную высоту и максимальную ширину в вашем .css

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

в дополнение к вашим свойствам высоты и ширины

Ответ 3

Это естественное поведение кнопок. Вы можете попробовать установить максимальную ширину/максимальную высоту в родительском контейнере, но я не уверен, что бы это сделало.

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

Другой вариант - использовать инструменты 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

На вашей странице есть 3 блокирующих CSS ресурса. Это приводит к задержке рендеринга вашей страницы.

Ни один из вышеперечисленных материалов на вашей странице не может быть обработан без ожидания загрузки следующих ресурсов. Попробуйте отложить или асинхронно загрузить блокирующие ресурсы или вставить критические части этих ресурсов непосредственно в HTML.

Оптимизировать доставку CSS следующим образом: https://www.laptoprepairworld.com/ wp-content/cache/autoptimize/css/autoptimize_f5c8cb6819fdf9d0bd4f8358403523eb.css https://www.laptoprepairworld.com/wp-includes/css/css? ver = 4.9.9 https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C600%7CRaleway%7CAbril+Fatface&ver=4.9.9 Это правило срабатывает, когда Sitechecker обнаруживает, что ваш HTML ссылается на блокировку внешний файл JavaScript в верхней части страницы.

пожалуйста, кто-нибудь может помочь.. я готов к этому

Ответ 6

Используйте стиль ширины.

CSS

div {
    width:50px;
}

HTML

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

Ответ 7

Используйте этот стиль

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