猿问

这个怎么对齐,求成熟方案

大小对齐,横向对齐,请给我代码,谢谢

西兰花伟大炮
浏览 1467回答 2
2回答

习惯受伤

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" type="text/css" href="styles/layout.css" />    <style type="text/css"> *{margin:0;padding:0;} body { background:#DFB988; } div.search { width:465px; height:60px; position:relative; overflow:hidden; margin:50px;  } div.search input[type="text"]{ width:310px; height:58px; line-height:58px; text-indent:10px; font-size:18px; border:1px solid #333;} div.search input[type="submit"]{position:absolute; right:0;top:0; width:115px; height:60px; border:1px solid #333; font-size:20px; }    </style> </head> <body> <div class="search"> <input type="text" placeholder="输入关键字搜索" /> <input type="submit" value="搜索" /> </div> </body> </html>

习惯受伤

右侧的Button绝对定位。另外,input#text 和 input#button 默认有个padding,先清除:*{ margin:0; padding:0; }设置高度的时候:如果 input#text 有边框,那就设置的时候把边框加上,如:文本框高度 28px + 2px 边框。按钮有边框高度:28px + 2px 边框;按钮无边框高度:30px;
随时随地看视频慕课网APP
我要回答