CSS整理的答疑

最新推荐文章于 2024-07-30 14:49:32 发布

nx188

最新推荐文章于 2024-07-30 14:49:32 发布

阅读量393

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/nx188/article/details/50157103

CSS 专栏收录该内容

1 篇文章

订阅专栏

1.position:relavie div元素，相对定位，如何居中

.jmx-file-box{
position: relative;
width: 340px;
left: 50%;
margin-left: -170px;  /*此处的负值是宽度的一半*/
}
<div class="jmx-file-box"></div>

2.普通元素如何居中（加margin:0 auto)

<table border="1" style="margin:0 auto;">
</table>

文字如何居中，（此时body中的文字都居中）

body{text-align:center;}

3.opacity: 0属性控制不透明级别，0是完全被覆盖，透明

.jmxfile{opacity: 0}
<input type="file class="jmxfile" />

4.<input type="file" />控件难看

<style type="text/css">
/*jmx file 样式*/
input{vertical-align:middle; margin:0; padding:0}
.jmx-file-box{position:relative;width:340px;left:50%;margin-left:-170px;}/*position:relative;*/
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.jmxfile{text-align:center; position:absolute;top:0;right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }/*position:absolute;*/
</style>
<div class="jmx-file-box">
		  	<form enctype="multipart/form-data">
				<input type='text' name='textfield' id='textfield' class='txt' />  
				<input type='button' class='btn' value='浏览...' /> 
				<input type="file" name="jmxfile" class="jmxfile" id=jmxfile size="28" onchange="document.getElementById('textfield').value=this.value" />
				<input type="button" name="submit" class="btn" value="upload jmx" onclick="ajaxJmxUpload()"/> 
		  	</form>
  </div>

结果如下图：