Question

我正在制作这个演示。我不确定为什么无法将#input-box的宽度设置为0。我正在尝试隐藏此容器，并根据需要将其宽度设置为所需大小的动画，但是我无法正确地将宽度设置为0

body {
  padding: 30px;
}
#input-box{
      width:0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary" id="input-box">
  <div class="input-group m-0">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">Zip Zode</span>
  </div>
</div>
  
  </button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Answer 1

您还需要设置以下CSS属性：

SELECT 
  products.* 
FROM 
  products
WHERE 
  products.id NOT IN ( 
    SELECT 
      products.id
    FROM 
      products
      INNER JOIN descriptors ON descriptors.product_id = products.id
    WHERE 
      descriptors.approved = true
  )

body {
  padding: 30px;
}

#input-box {
  width: 0px;
  padding: 0;
  overflow: hidden;
}

Answer 2

按钮的填充

#input-box{
  width:0px;
  padding:0;
}

Answer 3

这是您想要的样子吗？screenshot

如果是这样，则需要指定其他一些CSS属性：

 #input-box{
      width:0px;
      padding: 0;
      margin: 0;
      border: 0;
}

无法将包含输入组的按钮的宽度设置为0

3 个答案: