Coisini-蜻蜓 2023-07-24 22:07 采纳率: 66.7%
浏览 14

关于CSS盒子宽度设置的问题,如何解决?

是这样的,我定义了一个搜索框search,左侧是input输入框,右侧是搜索按钮button,然后搜索框宽度和input输入框宽度都是按照网页大小测量做的,我的思路就是搜索框的宽度减去输入款的宽度就是搜索按钮的宽度,但是发现用这个宽度就有一个问题,就是太大了,装不下。我看视频讲解的是去测量了网页的真实宽度,然后用这个宽度作为搜索框的宽度,发现这个宽度与盒子是刚好的,我就觉得很奇怪,为什么啊?有谁知道的可以解答一下我的疑惑吗,感谢,好人一生平安!

 <!-- 3.搜索框部分 -->
        <div class="search">
            <input type="text" value="输入关键词">
            <button></button>
        </div>
/* 3.搜索框部分 */
.search {
    float: left;
    width: 412px;
    height: 42px;
    margin-left: 60px;
}

.search input {
    display: block;
    float: left;
    width: 342px;
    height: 40px;
    font-size: 14px;
    border: 1px solid #00a4ff;
    border-right: 0;
    color: #bfbfbf;
    /* 注意:因为.search设置了宽度,加了padding会撑大盒子
    所以width要减去18 */
    padding-left: 18px;
}

/* 行内块元素之间默认是有缝隙的,加了浮动不会有缝隙 */
.search button {
    float: left;
    background-image: url(images/btn.png);
    /* 注意:此处没有用search-input的宽度 */
    width: 50px;
    height: 42px;
    /* 注意:按钮有默认边框,要去掉 */
    border: 0px;
}

  • 写回答

3条回答 默认 最新

  • 开发者小峰 2023-07-25 01:09
    关注

    里面的东西用box-sizing: border-box;会简单

    评论

报告相同问题?

问题事件

  • 创建了问题 7月24日

悬赏问题

  • ¥15 ue2.6.12版本用的若以,安装gojs,引入import * as go from 'gojs';报错
  • ¥15 服务器上的网站安装php5.6版本
  • ¥15 ModuleNotFoundError: No module named 'torch.utils._import_utils' 是缺少什么
  • ¥15 请大咖一起探索iptv 直播源的hls通过反向代理解密
  • ¥100 寻找技术员 云闪付tn转h5输入卡号付款的链接 重酬!
  • ¥100 科大讯飞语音唤醒词,unbuntu环境,报错
  • ¥50 python写segy数据时出错2
  • ¥20 关于R studio 做精确稳定检验的问题!(语言-r语言)
  • ¥50 用贝叶斯决策方法,设计CAD程序
  • ¥20 关于#目标检测#的问题:(qq收集表到时间才能填写,填写的份数有上限)