zoukankan      html  css  js  c++  java
  • input、select等表单元素的对齐问题

    今天在写页面时,发现了一个问题,当INPUT、SELECT及用图片做的button放在一起(并排放一起)时,没法子对齐,自己以不愿再加其他代码。也不愿使用JS来实现图片button的效果,试好半天,发现原来一个vertical-align:middle就可搞定。

    归纳如下:

    1、.INPUT和图片按钮对齐:

    <form method="post" action="ccc.asp">
    <input type="text" name="title" onfocus="this.value=''" value="请输入单词">
    <input type=image src="/img/dict.gif" align="absmiddle">
    </form>

    也可以在按钮的样式里面加入:vertical-align:middle;

    2.INPUT和文字对齐
    定义INPUT的样式,input {vertical-align:middle;},这样文字就会和INPUT框对齐。

    3.以此类推,SELETE框等都如此
    可以在全局CSS中定义:input,select{vertical-align:middle;} 省的后面麻烦。

  • 相关阅读:
    【C#】Color颜色对照表
    eslint的实践
    关于babel和webpack结合使用的实践
    前端学习博客
    css学习4--网格布局
    css学习3--flexbox布局
    CSS学习2-布局介绍
    css学习1
    前端性能优化
    line-height介绍
  • 原文地址:https://www.cnblogs.com/3body/p/5417249.html
Copyright © 2011-2022 走看看