两个input放一行不能对齐

若两个input都是text属性，并且不设置字号大小，那么两个input可以在一行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>aa</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    *{margin:0;padding:0;}
    .aa{width: 300px;height: 40px;border:1px solid red;}
    .bb{width: 100px;height: 40px;border:1px solid green;}
</style>
</head>
<body>
    <input type="text" value="aa" class="aa"><input type="text" value="bb" class="bb">
</body>
</html>

若两个input都是text属性，设置字号大小，那么两个input将出现两个不在一行的情况（字号很大的时候）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>aa</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>aa</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    *{margin:0;padding:0;}
    .aa{width: 300px;height: 40px;border:1px solid red;}
    .bb{width: 100px;height: 40px;border:1px solid green;}
</style>
</head>
<body>
    <input type="text" value="aa" class="aa"><input type="button" value="bb" class="bb">
</body>
</html>

原因不知道为什么

    *{margin:0;padding:0;}
    .aa{width: 300px;height: 40px;border:1px solid red;}
    .bb{width: 100px;height: 40px;border:1px solid green;font-size: 34px;}
</style>
</head>
<body>
    <input type="text" value="aa" class="aa"><input type="text" value="bb" class="bb">
</body>
</html>

若两个input不都是text属性，一个是text属性，一个是button属性，input type="button"设置的border不起作用，连个input即使设置高度值一样，但实际高度仍然是不一样的

针对两个行内元素中间出现间隙的bug

http://www.jianshu.com/p/50e6cb9aeed6

时间： 2024-11-10 01:26:55

两个input放一行不能对齐的相关文章

两个inline-block消除间距和对齐

一.神奇的两个inline-block 很初级的问题,无聊决定写一个故事. 故事的主人公很简单,两个inline-block元素.代码如下,为了看起来简单明了,写得很简陋.效果图如右.发现有两个问题. 1:两个元素水平有空隙,简单的初始化margin:0好像并没有起想象中的作用,为什么呢 2:两个元素垂直也没有对齐,等高的的行内块元素不应该阿: 二.消除两个inline-block元素水平间距最终效果讲解demo <div class="space"> <a hr

在reset css后两个input之间还是出现默认间隔的问题。

<div class="search_box fl"> <input type="text" class="search_text" /> <input type="button" class="search_btn" value="搜索" /> </div> 将上面这种写法换成下面这种写法即可解决问题 <div class=&qu

input与lable水平对齐

CSSinput,label { vertical-align:middle;} html 格式 <label><input/></label> <label><input/></label> input与lable水平对齐

微信小程序-两个input叠加，多次点击字体变粗或闪动

问题描述: 当两个input叠加,多次点击input框, placeholder 字体变粗或input框闪动.如图: 代码:  <input placeholder='请输入昵称,手机号,客户名称' ></input>  <input placeholder='请输入昵称,手机号,客户名称' ></input> 效果示意图: 解决

输入框input和旁边按钮对齐的解决方案

问题: 最近在写一个电商网站的静态页面练手,遇到了一个特别奇怪的现象,如下图: 输入框和旁边的搜索框没法对齐,于是乎百度解决方案,各种说法都有,但是没有一个是自己认为切实可行的或者是说得比较简单易懂的. 或许是我理解起来比较慢吧,呵呵. 下面直接进入正题之解决方案: [本解决方案借鉴了百度首页搜索框的写法] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo

如何让两个input紧挨着.

做一个搜索条,需要两个一个input和两个select紧挨着连在一起. 以前这么做的时候,是分别将这些标签放到一个div里面.然后让div紧挨着. 今天偶然发现,居然只要将这些标签在html放到一行里面就可以了!!! <input type="text" /><select></select><select></select> 尼玛,折腾了一下午,知道真相的我眼泪差点掉下来.

如何让两个div处于一行

我们知道 div是块级元素,是独占一行的.一般情况下,两个相邻的div是不会处于一行的例如: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>让两个div处于同一行</title> </head> <body> <div style="height: 40px;w

两个div在一行中显示

div元素默认是换行的,如果想让两个div显示在一行中,需要分别设置div的display属性值为:inline-block.这样两个div紧挨着显示在一行了.如:<div style='dispaly:inline-block'> value1<div><div style='dispaly:inline-block'> value2<div>还有一个css特性float,这个是设置元素浮动的,一般用在图片上.也可以让div浮动,但是会出现一些很奇怪的现象

js实现网页的两个input标签内的数值加减

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var oIput1=document.getElementById('put1'); var oIput2=document.getElementById('put2'); var nAdd=doc