相关疑难解决方法(0)
内联块列表项之间的空格
为什么内联块列表项中有空格？无论我如何将我的列表项目放入菜单,我总是得到空格.
li {
border: 1px solid black;
display: inline-block;
height: 25px;
list-style-type: none;
text-align: center;
width: 50px;
}
ul {
padding: 0;
}<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>推荐指数
解决办法
查看次数
css垂直对齐浮动div
你好我有一个div(#wrapper),包含2个div并排.我希望右边的div垂直对齐.我在我的主包装器上尝试了vertical-align:middle,但它没有用.这让我抓狂!希望有人能提供帮助.提前感谢您的回复.干杯.渣.
我的HTML:
<div id="wrapper">
<div id="left-div">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
<div id="right-div">
Here some text...
</div>
</div>
我的CSS:
#wrapper{
width:400px;
float:left;
height:auto;
border:1px solid purple;}
#left-div{
width:40px;
border:1px solid blue;
float:left;}
#right-div{
width:350px;
border:1px solid red;
float:left;}
ul{
list-style-type: none;
padding:0;
margin:0;}
推荐指数
解决办法
查看次数
DIV中的元素开始一个新的行
我需要你在HTML/CSS问题上的帮助:我正在创建一个非常简单的网页,其中有一个由包含五个"li"的"ul"组成的导航栏."ul"是900px宽,它在"div"内.每个"li"是900/5 = 180px宽.尽管如此,这些元素创造了一条新线.
这是我期望的(或多或少):
这是我获得的:
这是HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My First Website</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/princstyle.css">
</head>
<body>
<div id="container">
<div id="fascia">
<h1>My First Website</h1>
</div>
<hr class="menu">
<div id="nav">
<ul>
<li><a href="img/a.jpg">About</a></li>
<li><a href="img/b.jpg">Photo</a></li>
<li><a href="img/c.jpg">News</a></li>
<li><a href="img/d.jpg">Video</a></li>
<li><a href="img/e.jpg">Contacts</a></li>
</ul>
</div>
<hr class="menu">
</div>
</body>
</html>
这是我的第一个CSS文件(重置标准CSS文件):
html, body, div, span, applet, object, iframe,
h1, h2, …推荐指数
解决办法
查看次数
这两个元素(<li>)之间的这个随机额外空间是多少？
我有这个问题.我搜索了网站,其他人也有类似的问题,但没有一个答案似乎有效.包括将行高设置为0px; 并将所有边距/填充设置为0px.我使用Google Chrome的Inspect Element材料来检查边距/填充.我在我的"a"元素和"li"元素上盘旋,看看它们是否有任何不必要的填充或边距,但它们没有.
奇怪的是,他们在每个链接之间有一个小空格,没有被整个文档中的任何元素占据.
现在,由于文本之间没有边框,因此无法识别,但Link4中"a"周围的空间小于Link1中文本周围的空间.第一个"li"元素的宽度比第四个"li"容器宽4px,并且有一点白色空间.我想摆脱白色空间,任何想法？
这是代码:
CSS:
html {
overflow-y: scroll;
}
body {
background-color: #ffdeff;
overflow: hidden;
}
#wrapper {
width: 1000px;
height: 0px;
overflow: hidden;
margin: auto;
background-color: white;
border-left: 1px solid rgb(210, 210, 210);
}
#header {
width: 1000px;
height: 0px;
overflow: hidden;
margin: auto;
}
#header-toolbar {
width: 1000px;
list-style-type: none;
border-radius: 3px;
position: absolute;
}
#nav-position {
position: absolute;
float: left;
padding: 0px;
margin: 0px;
}
.nav-link-container {
background-color: #FF66CC;
display: inline;
padding: 0px; …推荐指数
解决办法
查看次数
nowrap内联块之间的空间
我希望有几个块元素彼此相邻,它们采用完整的浏览器宽度.
有了white-space: nowrap它,它工作得很好,但在一个元素和另一个元素之间有一些像素的随机空间:
body { margin: 0; padding: 0; }
#container1 { white-space: nowrap; position: absolute; width: 100%; }
#container1 div { display: inline-block; width: 100%; height: 200px; }
<div id="container1">
<div style="background: red;"></div>
<div style="background: yellow;"></div>
<div style="background: green;"></div>
<div style="background: blue;"></div>
</div>
这是jsBin演示.
它没有填充,没有边距,没有边框,没有偏移.
推荐指数
解决办法
查看次数