精华内容
下载资源
问答
  • 如何让多个输入框对齐

    万次阅读 2016-07-15 20:16:16
    我们在制作用户的登录或者是...接下来就给大家提供一个表单中的输入框对齐的模版,由于只有用户登录的代码模块,所以在显示的时候验证码处的图片为空。 用户登录 form{padding:0px 15px 15px 120px;} form{width:

    我们在制作用户的登录或者是注册表单时,经常会遇到输入框对不齐的情况,这样表单整体看起来就特别的丑,最简单的方法最笨的方法就是加空格,然而这种方法最好在迫不得已的是后才使用。接下来就给大家提供一个表单中的输入框对齐的模版。


    以下只给出用户登录的html代码,验证码的代码不再说明。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="GBK">
    <title>用户登录</title>
    <style>
    form{padding:0px 15px 15px 120px;}
    form{width:500px;height:300px;}
    form fieldset{border:0;align:center;}
    form label{display:inline-block;width:60px;text-align:right}
    input{width:240px;height:30px;}
    #submit{width:200px;height:35px;position:relative;left:70px;}
    #submit:hover{
    		cursor: pointer;
    		background:#D8D8D8;
    	}
    body{
    	width:100%; 
        height:100%;
    	background: #E9E9E9; 
    	}
    #box{position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto;top:100px;} 
    #code{width: 70px;
    	 height: 40px;
         font-size:18px;}
    	#captcha_img{
        position:relative;
    	bottom:-15px;
    	}
    a{position:relative;bottom:-10px;}	
    </style>
    </head>
    <body>
      <div id="box">
        <form method="post"action="login.php"style="background:#cccccc">
        <fieldset>
          <p>
            <label>用户名:</label>
            <input type="text"name="username"placeholder="用户名"required="required"/>
          </p>
          <p>
            <label>密码:</label>
            <input type="password"name="password"placeholder="密码"required="required"/>
          </p>
          <p>
            <label>验证码:</label>
            <input type="text"name="authcode"value=""required="required" id="code"/>  
            <img id="captcha_img"src="idcode.php"/>
            <a href="javascript:void(0)"οnclick="document.getElementById('captcha_img').src='idcode.php'">看不清</a><!-- javascript:void(0)是一个死链接不会跳转也不会返回到顶部. -->
          </p>
          <p>
            <a href="register.html">没注册</a>
          </p>
          <p>
            <input type="submit"value="登陆"name="submit" id="submit"/>
          </p>
        </fieldset>
        </form>
      </div>
    </body>
    </html>



    
    展开全文
  • 一般来说,我处理图标如果临近的话都会使用同样宽高,...1.图标和文字对齐一般的图标和文字对齐html代码:霍者网页设计删除霍者网页设计博客CSS代码:p{line-height:20px;font-size:14px;}.icon{display:inline-bl...

    一般来说,我处理图标如果临近的话都会使用同样宽高,然后使用inline-block比较多,表单输入框和按钮以line-height:21-22为准。然后超出的用padding来补充。

    1.图标和文字对齐

    一般的图标和文字对齐html代码:

    霍者网页设计

    删除霍者网页设计博客

    CSS代码:p{line-height:20px; font-size:14px;}

    .icon {

    display: inline-block;

    width:20px; height:20px;

    background: ...;

    white-space:nowrap;

    letter-spacing: -1em;

    text-indent: -99em;

    color: transparent;

    /* IE7 */

    *text-indent: 0;

    *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\3000');

    }

    .icon:before {

    /* 伪元素插入空格文本 */

    content: '\3000';

    }

    这个代码主要是通过line-height来控制图标的文字和临近的文字同样行高,实现在同一行中。

    2.表单输入框和内容对齐

    简单的一个文字和文本输入

    手机号*

    CSS代码:body{font:14px/1.42858 'microsoft yahei', arial, sans-serif; -webkit-font-smoothing: antialiased; } /*行高为20像素*/

    .cell {

    display: table-cell;

    *display: inline-block;

    width: 2000px;

    *width: auto;

    }

    input.ui_input,

    .ui_input > input {

    height: 20px;

    line-height: 20px;

    padding: 9px 8px;

    border: 1px solid #d0d0d5;

    border-radius: 4px;

    background-color: #fff;

    font-size: 14px;

    outline: none;

    color: #545a6c;

    -webkit-transition: border-color .15s, background-color .15s;

    transition: border-color .15s, background-color .15s;

    }

    继续阅读:

    原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/418.html,标题:CSS图标文字对齐和表单输入框文字对齐兼容

    展开全文
  • CSS语言:CSSSCSS确定...}body {background-color: #ddd;background-image: linear-gradient(to bottom, #f3f3f3, #dadada 90%);color: #888888;font-family: Helvetica, Arial, sans-serif;font-siz...

    CSS

    语言:

    CSSSCSS

    确定

    html {

    min-height: 100%;

    }

    body {

    background-color: #ddd;

    background-image: linear-gradient(to bottom, #f3f3f3, #dadada 90%);

    color: #888888;

    font-family: Helvetica, Arial, sans-serif;

    font-size: 16px;

    padding: 20px;

    }

    form,

    ul,

    li,

    input,

    label {

    box-sizing: border-box;

    }

    h1,

    p {

    color: #333;

    font-family: "Lucida Grande", "Trebuchet MS", sans-serif;

    font-size: 1.6em;

    margin: 0.5em 0 1em 0;

    text-align: center;

    }

    p {

    font-size: 80%;

    }

    label,

    input {

    display: block;

    }

    ul {

    background-color: #fffdfa;

    border: 5px solid #888888;

    list-style-type: none;

    margin: 3em auto;

    padding: 0;

    max-width: 350px;

    }

    li {

    border-bottom: 1px solid #c8c8c8;

    margin-top: -1px;

    padding: 12px 10px 2px 10px;

    }

    li.active {

    background-color: #eeeeee;

    box-shadow: 0px 3px 4px -2px rgba(0, 0, 115, 0.25) inset;

    }

    label {

    font-family: "Lucida Grande", "Trebuchet MS", sans-serif;

    font-size: 70%;

    color: #aeaeae;

    letter-spacing: 0.03em;

    text-transform: uppercase;

    }

    .active label {

    color: #0059a6;

    }

    input,

    input:focus {

    background-color: transparent;

    border: none;

    color: #626262;

    font-size: 18px;

    margin: 9px 0 7px 0;

    outline: none;

    width: 100%;

    }

    input:focus {

    color: #000;

    }

    展开全文
  • 关键: 1.父元素(例如div)设置为text-align:center; 2.span元素要垂直居中,要设置line-height;同时input也要设置line-height ;两者的值设置成一样的。已经经过测试,ie8、chrome下没问题。...

    关键:

    1.父元素(例如div)设置为text-align:center; 

    2.span元素要垂直居中,要设置line-height;同时input也要设置line-height ;两者的值设置成一样的。已经经过测试,ie8、chrome下没问题。

    <div class="enter_eamil_section">
    <span>邮箱</span><input type="text" name="email"/>
    </div>

     

    .enter_eamil_section{
    text-align:center;
    margin:45px 0;
    }
    .enter_eamil_section span{
    font-size:16px;
    margin-right:10px;
    line-height:30px;
    }
    .enter_eamil_section input{
    width:278px;
    height:30px;
    border:1px solid #b2bfc8;
    line-height:30px;
    }

    转载于:https://www.cnblogs.com/mabelstyle/archive/2012/11/22/2782841.html

    展开全文
  • 收集一些用CSs控制INPUT/BUTTON等网页元素与文字对齐的实用小代码,细心的朋友会发现,如果前面一个INPUT,后边是文字的话,你会发现文字和输入框在垂直方向上不是对齐的,影响页面美观,因此本页的代码收集的包括了...
  • 讲到20像素图标对齐和表单元素40像素对齐有所收获,谢谢@张鑫旭 ,很多观点跟平时的处理方式不谋而合,一般来说,我处理图标如果临近的话都会使用同样宽高,然后使用inline-block比较多,表单输入框和按钮以line-...
  • 最近使用jquery_ui 的datepicker控件时发现设置buttonimage后,图标总是与输入框对不齐,非常难看,经过搜索可以在网页中增加 .ui-datepicker-trigger { margin-bottom:-5px; } 即可对齐,或者将上述...
  • 我们在布局中,常会遇到文本输入框与同处一行的文本不对齐的问题。这个问题设置input的vertical-align:middle属性来解决。 我们来看下面的例子,如何解决文本输入框与文本对齐的问题! <!DOCTYPEhtmlPUBLIC"-//...
  • 讲到20像素图标对齐和表单元素40像素对齐有所收获,谢谢@张鑫旭 ,很多观点跟平时的处理方式不谋而合,一般来说,我处理图标如果临近的话都会使用同样宽高,然后使用inline-block比较多,表单输入框和按钮以line-...
  • 初学者写搜索框部分时,缩小页面造成输入框与搜索按钮对不齐的问题 一般来说初学者写搜索框都是用浮动来实现,一个div中放一个input,和一个a标签包含字体图标 HTML <div class="soso-box "> <input type=...
  • 今天在做网页的时候发现表单中的input输入框和submit按钮总是对不齐,处于上下错位状态,最终在网上找到解决方法,拿来做个备忘。  1.input和图片按钮对齐:  &lt;form&gt;  &lt;input type="...
  • 有的公司可能会用到一些自己的 前端 框架,这个时候 我们使用 eclipse 开发 编写...这里以 mx framework 为例,介绍如何 把 网页版 API 手册输入框自动提示 &gt;&gt;&gt; 转换为 开发中的 自动提示.  ...
  • ①:上面的效果图随意摆放的input输入框唤起键盘的对齐问题,下面上代码:*{margin:0;padding:0;}html,body{width:100%}.box{width:100%}.box ul li{width:100%;height:80px;line-height:80px;margin-bottom:5px;...
  • 输入框设计解析

    千次阅读 2020-10-16 11:15:01
    文本输入框是最基本的界面控件之一。它需要显著、良好的可访问性,高效、舒适的互动性。我们需要明白输入框是什么...设计考虑到网页无障碍阅读,即输入框文字的前景色跟后景色要有足够的对比度,提高可识别性。1.1.1 输
  • 在写移动端页面时候在乐视手机测试时,点击输入框输入框无法自动调整到可视区域,并且输入法挡住了输入框,在其他苹果和安卓手机上测试是可以自动移动到可视区域的上网找了一些方法: 1、scrollIntoView(true | ...
  • ,元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的  scrollIntoViewOptions: {block: "start", inline: "nearest"} 。这是这个参数的默认值。 如果为 false, 元素的底端将和其所在滚动区的可视区域的...
  • 常用输入框的测试用例汇总

    万次阅读 2019-05-10 11:41:29
    针对普通输入框的测试用例 1、 输入中英文空格,字符串中间空格,首尾空格,回车换行符 2、 字符长度校验,输入是缓冲区溢出的超长字符,默认字符,空字符,特殊字符,尤其是系统保留字符 3、 根据的页面使用的不同...
  • 我的回答包含2个场景,因此它可以帮助您按照自己的方式。所以你可以选择你想要的最佳方式。我还提供了实例,以便您轻松查看。1。对于左边的所有文本,包括标题和文本。添加此CSS/* For All Left */#welcome-content-...
  • 本文主要总结h5网页在ios不同版本上的表现及我的解决方案: ios 表现 解决方案 11.1 页面被顶起后回弹到底部没有触发scrollTop的改变,window.innerHeight没有改变,用户可以向上移动页面以获得输入框 ...
  • H5移动端弹出键盘时遮挡输入框

    千次阅读 2019-01-07 16:23:51
    记一次,解决移动端文本框弹出键盘遮挡输入框的方法: document.activeElement.scrollIntoViewIfNeeded(); 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口...
  • 前言 表单设计应该是网页设计中最常遇上的,而一般表单就包括说明文字即标签,以及对应的文本框、文本区域等表单元素。此时就经常遇到一个设计问题,左侧的标签该左对齐呢还是右对齐?其实各有好处,使用左对齐的...
  • 一个文本框旁边一个按钮是很经常用到的网页内容,比如搜索框等等,而如果旁边的按钮使用图像的话,他们竖直方向就很不容易对齐,即使使用 vertical-align、padding和margin等都不行(特别是在IE中,Firefox中使用...
  • HTML5中input输入框默认提示文字向左向右移动 首先演示input输入框代码 <style> * { margin: 0; padding: 0; } .sousuo { width: 458px; height: 34px; margin-left: 190px; margin-top: 200p
  • 表单设计应该是网页设计中最常遇上的,而一般表单就包括说明文字即标签,以及对应的文本框、文本区域等表单元素。此时就经常遇到一个设计问题,左侧的标签该左对齐呢还是右对齐?其实各有好处,使用左对齐的表单设计...
  • 有一个登录也页面,页面有1个用户名输入框,一个密码输入框,一个提交按钮,设计测试用例。 注意:首先应该了解用户的需求,比如这个登录页面应该是弹出窗口式的,还是直接在网页里面的,对用户名的长度、和密码的...
  • 表单中标签与输入区的4种对齐方式标签垂直顶对齐标签水平右对齐标签水平左对齐标签在输入区内部《Web Form Design》一书中对标签和输入区组合进行了一些研究,我整理了一份数据比较的表格:1、标签垂直顶对齐标签和...
  • Web Search:显示便于在网页上书写的虚拟键盘 数字键盘使用样例:   1 textField.keyboardType =  UIKeyboardType .numberPad ...
  • 输入框( Input )应当符合逻辑地划分为小组,这样大脑就可以很好的处理大堆区域间...每对标签和输入框垂直对齐给人一种两者接近的感觉,并且一致的左对齐减少了眼睛移动和处理时间。用户只需要往一个方向移动:下。  

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,493
精华内容 3,797
关键字:

网页输入框对其