表单居中,坑爹啊

2014年3月17日 10:18:06

表单居中的问题,困扰了很多次。具体的问题是: 左侧label是浮动的,直接居中的,就跑到input上面了。为了保持水平,同时表单还要居中。将FIELDSET标签放入一个div  div的内边距设置了200px。模拟出了居中的效果

 

代码如下:

 

<FIELDSET >
<DIV id=legend ><LEGEND>供应商档案</LEGEND></DIV>

<DIV class='mydiv'>

<DIV class='control-group'><!-- Text input--><LABEL class=control-label
    for=input01>名称</LABEL>
<DIV class=controls><INPUT class=input-xlarge type=text name="s_Name"
    placeholder="公司名称">
<P class=help-block>不要超过50汉字</P>
</DIV>
</DIV>
<DIV class=control-group><!-- Select Basic --><LABEL class="control-label">类型</LABEL>
<DIV class=controls><SELECT class=input-xlarge name="s_Type">
    <OPTION selected>元器件</OPTION>
    <OPTION>元器件</OPTION>
    <OPTION>元器件</OPTION>
    <OPTION>零件</OPTION>
    <OPTION>零件</OPTION>
</SELECT></DIV>
</DIV>
<DIV class=control-group><!-- Text input--><LABEL class=control-label
    for=input01>编码</LABEL>
<DIV class=controls><INPUT class=input-xlarge type=text name="s_Id"
    placeholder="注意不可以重复"><button class="btn btn-mini" type="button">Go!</button>
<P class=help-block>只能为字母和数字</P>
</DIV>
</DIV>
<DIV class=control-group><!-- Text input--><LABEL class=control-label
    for=input01>地址</LABEL>
<DIV class=controls><INPUT class=input-xlarge type=text name="s_Address"
    placeholder="详细地址">
<P class=help-block>不要超过50汉字</P>
</DIV>
</DIV>

<DIV class=control-group><!-- Text input--><LABEL class=control-label
    for=input01>联系人</LABEL>
<DIV class=controls><INPUT class=input-xlarge type=text name="s_Person"
    placeholder="格式:吴文付或吴先生">
<P class=help-block>建议为供应商负责人</P>
</DIV>
</DIV>


<DIV class=control-group><!-- Text input--><LABEL class=control-label
    for=input01>联系方式</LABEL>
<DIV class=controls><INPUT class=input-xlarge type=text name="s_Phone"
    placeholder="联系人手机或公司电话">
<P class=help-block>必填,建议为联系人的手机</P>
</DIV>
</DIV>
<DIV class=control-group><!-- Text input--><LABEL class=control-label
    for=input01>备注</LABEL>
<DIV class=controls><INPUT class=input-xlarge type=text name="s_Remark"
    placeholder="额外信息">
<P class=help-block>简单描叙,限50汉字</P>
</DIV>
</DIV>


<DIV class=control-group><LABEL class=control-label></LABEL> <!-- Button -->
<DIV class=controls>
<BUTTON class="btn btn-success" type=submit>提交</BUTTON>
<BUTTON class="btn btn-success" type=reset>重置</BUTTON>
</DIV>




</FIELDSET>
</DIV>

</DIV>
</FORM>
居中表单

 

 

2014年3月17日 13:03:24

 

应用了前端框架的提示。

 

代码如:

<input type="text" class="input-xlarge" id="keyWord" data-content="输入供应商的编码" 
    placeholder="输入供应商的名称" />


 $('#keyWord').popover("")
弹窗

 

 

 

2014年3月17日 13:06:33

 

恶心死了,今天一个同事遇到 一个政府领导的索贿要求,唉。一口气 9000多块。

 

 

2014年3月17日 19:52:17

 

回到小窝里,解决了sublime text2的快捷键问题 ctrl+shift+f 可以格式化代码了。

 

解决的方法: 参考了老外的 https://joshbetz.com/2012/09/reindent-text-in-sublime

 

 

2014年3月17日 20:20:34

 

安装了2个插件 一个去空行的

DeleteBlankLines

一个是自动注释的 DocBlockr,

这2个是我最需要的。

 

插件的安装思路: 先调出控制台:执行如下代码:

 

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

 

再执行  ctrl+shift+p。此时会输出一个输入框, 输入install。  选择package contrl: install package 回车

 

然后输入插件的名称 即可  ,

 

 

 

 

 

posted on 2014-03-17 10:21  jsRunner  阅读(1822)  评论(0编辑  收藏  举报

导航