Question

当我在文本框中输入font-size：9px时，它正确，上下对齐，但这是非常小的字体。但是当放一个font-size：15px时，这是一个不错的字体，但是我将div向上和向下放大，就像在图像中看到的那样：字体大小：9像素：https://postimg.cc/2L3dkwJN 字体大小：15像素：https://postimg.cc/F1KVVrKC 我该如何解决？这是我的代码：

    <!DOCTYPE html>

<html>
    <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <LINK REL=StyleSheet HREF="css/bootstrap.css" TYPE="text/css">
    <link rel="stylesheet" href="estilos_menu.css">
    <style>
        .icono
            {
                width:30px;/*tama�o del icono*/
                height:20px;
            }
    </style>
    </head>
<body>
<div class="container-fluid">
<div class="row " >
    <div class="col-sm-2 col-lg-2 bg-secondary my-auto" style="z-index:3;">
    <!--<div class="hamburguer">-->
<div class="row" style="margin-top:30px !important;margin-bottom:30px !important;">
<div class="col-5">   
    <div>
                            <ul class="nav">
                                    <li><img class="icono"  src="hamburguer.png">
                                            <ul>
                                                    <li><a href="">Tienda</a>
                                                            <ul>
                                                                <li><a href="">Ver todo</a></li>
                                                                    <li><a href="">Armarios</a></li>
                                                                    <li><a href="">Sillas</a></li>
                                                                    <li><a href="">Sillones</a></li>
                                                                    <li><a href="">Sofás</a></li>
                                                                    <li><a href="">Mesas</a></li>
                                                                    <li><a href="">Mesillas y cajoneras</a></li>
                                                                    <li><a href="">Lámparas</a></li>
                                                            </ul>
                                                    </li>
                                                    <li><a href="blog_principal.php">Blog</a>
                                            <ul>
                                                    <li><a href="minimalista.php">Estilo minimalista</a></li>
                                                    <li><a href="nordico.php">Estilo nórdico</a></li>
                                                    <li><a href="retro.php">Estilo retro</a></li>
                                                    <li><a href="rustico.php">Estilo rústico</a></li>
                                                    <li><a href="clasico.php">Estilo clásico</a></li>
                                                    <li><a href="exteriores.php">Espacios exteriores</a></li>
                                                    <li><a href="fusion_estilos.php">Fusión de estilos</a></li>                     
                                                    <!--</li>-->
                                            </ul>
                                    </li>
                                            </ul>
                                    </li>   
                            </ul>

                    </div>              

    </div> <!-- div col-->
        <div class="col-7">
        <a href="#">BOKDEKÓ</a>
        </div>
</div>
</div>
    <div class="col-sm-10 col-lg-5 bg-danger my-auto" >
    <div class="row" style="margin-top:30px !important;margin-bottom:30px !important;">

        <div class="col-2">    
        <a href ="#">Cuenta</a>
        </div>
        <div class="col-2">
        <a href ="#">Registrarse</a>
        </div>
        <div class="col-8">    
        Busca productos
        <input type=text name=buscar size='12' maxlength='15' value='' style="padding-top:1px;padding-bottom:1px;font-size:9px;">
        </div>
    </div>
    </div><!--div col-->
    <div class="col-sm-12 col-lg-5 bg-info my-auto"><!--align-self-center-->
        <div class="row" style="margin-top:30px !important;margin-bottom:30px !important;">
            <div class="col-3 ">
            <a href="#">Mi lista</a>
            </div>
            <div class="col-3 bg-success">
            <a href ="#">Carrito</a>
            </div>
            <div class="col-6 bg-warning">
            <a href="#">Hola</a>
            </div>
        </div>
    </div> <!--div col-->
    </div> <!--div row-->
</div>
<script src="js/popper.min.js"  type="text/javascript"></script>
<script src="js/jquery-3.5.1.slim.min.js"  type="text/javascript"></script>
<script src="js/utilidades.js"  type="text/javascript"></script>  
</body>
</html>

Answer 1

您的行内边距样式是造成此问题的原因。如果字体较大，则文本框会很高，然后页边距会将高度推到所需的位置。

无需大量修改，您就可以删除那些内联样式，只需将一个类添加到父行，然后使用该类来设置固定高度。

.nav-section .row {
  height: 80px;
  align-items: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row nav-section">
    <div class="col-sm-2 col-lg-2 bg-secondary my-auto" style="z-index:3;">
      <!--<div class="hamburguer">-->
      <div class="row">
        <div class="col-5">
          <div>
            <ul class="nav">
              <li><img class="icono" src="hamburguer.png"></li>
            </ul>
          </div>
        </div>
        <!-- div col-->
        <div class="col-7">
          <a href="#">BOKDEKÓ</a>
        </div>
      </div>
    </div>
    <div class="col-sm-10 col-lg-5 bg-danger my-auto">
      <div class="row">
        <div class="col-2">
          <a href="#">Cuenta</a>
        </div>
        <div class="col-2">
          <a href="#">Registrarse</a>
        </div>
        <div class="col-8">
          Busca productos
          <input type="text" name="buscar" size="12" maxlength="15" value="">
        </div>
      </div>
    </div>
    <!--div col-->
    <div class="col-sm-12 col-lg-5 bg-info my-auto">
      <!--align-self-center-->
      <div class="row">
        <div class="col-3 ">
          <a href="#">Mi lista</a>
        </div>
        <div class="col-3 bg-success">
          <a href="#">Carrito</a>
        </div>
        <div class="col-6 bg-warning">
          <a href="#">Hola</a>
        </div>
      </div>
    </div>
    <!--div col-->
  </div>
  <!--div row-->
</div>

Answer 2

很难告诉您，因为您的代码没有附带任何实际的CSS样式，而只是HTML。我认为问题可能是您没有指定div元素的高度，而只是使用了填充。由于div没有设置高度，因此它将完全取决于其中的内容，这是不可以的。请参见jsfiddle here作为示例。另外，我建议使用“ box-sizing：border-box;”以防止将来您的边距和填充问题。

<div id="size-twelve">
<p>
Size 12
</p>
</div>
<div id="size-fifteen">
<p>
Size 15
</p>
</div>

#size-twelve {
  font-size: 12px;
  background-color: red;
  padding: 20px;
    width: 40%;
      display: inline-block;
    
}

#size-fifteen {
  font-size: 15px;
  background-color: green;
  padding: 20px;
  width: 40%;
  display: inline-block;
}

解决方案？给您的div固定高度（以px为单位）。即200px

更改文本框的字体大小会更改边距

2 个答案: