不熬夜的川川 2021-11-20 09:22 采纳率: 88.9%
浏览 33
已结题

制作搜索栏，input标签的使用

问题遇到的现象和发生背景

img


搜索栏大小不合适，并且想在搜索栏右侧加上搜索两个字样设置背景颜色为黑色。

问题相关代码，请勿粘贴截图
运行结果及报错内容
我的解答思路和尝试过的方法
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            
            #xk{
                border:2px black solid;
                margin: 0 auto;
                height:110px;width:800px;
                text-align: center;
            }
            
        </style>
    </head>
    <body>
        <div id="xk">
            <form id="jz">
                <input  type=”text”  name=””   id=””  value=请输入您的内容  placeholder="请输入您的姓"/>
            </form>
                <a>女单鞋 |</a>
                <a>春夏童装 |</a>
                <a>短外套 |</a>
                <a>四件套 |</a>
                <a>男士衬衫 |</a>
                <a>手表男 |</a>
                <a>双肩包 |</a>
                <a>零食 |</a>
        </div>
    </body>
</html>
我想要达到的结果

img
  • 写回答

2条回答 默认 最新

  • 筷头哥 2021-11-20 11:33
    关注
    
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #xk {
            border: 2px black solid;
            margin: 0 auto;
            height: 110px;
            width: 800px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        #jz {
            font-size: 0;
        }

        #jz>input {
            width: 500px;
            height: 35px;
            border: 3px solid black;
            box-sizing: border-box;
        }

        #jz>input:focus {
            outline-width: 0;
        }

        #jz>button {
            color: white;
            background-color: black;
            height: 35px;
            width: 80px;
            border: 1px solid black;

        }
    </style>
</head>

<body>
    <div id="xk">
        <form id="jz">
            <input type="text" placeholder="请输入您的姓名" />
            <button>搜索</button>
        </form>
        <div>
            <a>女单鞋 |</a>
            <a>春夏童装 |</a>
            <a>短外套 |</a>
            <a>四件套 |</a>
            <a>男士衬衫 |</a>
            <a>手表男 |</a>
            <a>双肩包 |</a>
            <a>零食 |</a>
        </div>
    </div>
</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 11月28日
  • 已采纳回答 11月20日
  • 创建了问题 11月20日

悬赏问题

  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改
  • ¥20 wireshark抓不到vlan