小编Mar*_*det的帖子
删除div元素之间的"空格"
这是我的HTML代码
<div id="div1">
<div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>
我的CSS:
#div1 {
width:150px;height:100px;white-space:nowrap;
border:blue 1px solid;padding:5px;
}
#div1 div {
width:30px;height:30px;
border:blue 1px solid;
display:inline-block;
*display:inline;zoom:1;
margin:0px;outline:none;
}
如果我<!DOCTYPE html>在<html>标记之前插入,页面将如下所示:
但是如果我删除<!DOCTYPE html>标签,两行之间的"空白"将被删除
但我想使用<!DOCTYPE html>标签,建议,但我找不到任何可以删除该空格的CSS规则,我使用了margin:0; outline:none; 等等...但它不起作用,任何人都帮助我.谢谢!(我不擅长英语......)
推荐指数
解决办法
查看次数
'hidden'属性不适用于flex-box
我有使用flex-box的以下代码
<!DOCTYPE html>
<polymer-element name='test-flex'>
<template>
<style>
.lab-flex-col-container {
display: flex;
flex-flow: column;
align-content: center;
background-color: gold;
border-radius:5px;
margin: 5px;
}
.lab-flex-col {
display:flex;
flex-flow:column;
align-self:center;
margin:5px;
}
.margin2 { margin: 2px; }
</style>
<form id='form'
class='form'>
<div class='lab-flex-col-container'>
<div class='lab-flex-col' id='hidden-does-not-work' hidden>
<input id='hidden-works' type='text'>
</div>
<div id='hidden-works' hidden>
<textarea></textarea>
</div>
<div id='hidden-does-not-work-here-either' class='lab-flex-col' hidden>
<button>Save</button>
</div>
</div>
</form>
</template>
<script type="application/dart;component=1">
import 'package:polymer/polymer.dart';
import 'dart:html';
@CustomTag( 'test-flex' )
class TestFlex extends PolymerElement
{
TestFlex.created() : super.created();
ready()
{ …推荐指数
解决办法
查看次数
保证金如何运作？
我在下面提供marginfix了一个块级元素,one并且two也是块级别,但这些是浮动的.这就是为什么它们在同一行布局上,但marginfix也没有浮动的原因,并且块级元素应该低于元素,如下所示
+--------------------+ +--------------------+
| | | |
+--------------------+ +--------------------+
+--------------------------+
| |
+--------------------------+
但它的工作方式如下
+--------------------+ +--------------------------+ +--------------------+
| | | | | |
+--------------------+ +--------------------------+ +--------------------+
这是HTML
<div class="wrap">
<div class="one">one</div>
<div class="two">two</div>
<div class="marginfix">three</div>
</div>
CSS
.wrap{
width: 500px;
background-color: red;
position: relative;
margin: 0 auto;
}
.one{
width: 200px;
float: left;
}
.two{
width: 200px;
float: right;
}
.marginfix{
margin: 0 210px;
}
更新说明
有人可能会说marginfix包含浮动元素的剩余空间.如果是这样,如果我们改变html元素的顺序,为什么它不起作用.这个HTML不会像上面的html一样工作
<div class="wrap">
<div …推荐指数
解决办法
查看次数
设置CSS top百分比不按预期工作
我尝试了响应式css布局,但"top:50%"无法正常工作,"left:50%"可以.为什么会这样？
<div style="position:relative;top:0%;left:0%;height:100%;width:100%">
<div style="position:absolute;top:50%;left:50%;">
</div>
</div>
推荐指数
解决办法
查看次数
动态地将div放在另一个div上
我希望在视频中心没有固定宽度的div中心,所以如果窗口调整大小,div将随之缩小但仍保留在中心.我使用左边的当前设置接近正确:50%,半负边距.问题显然是在负边际固定时向左移动.有任何想法吗？谢谢!
我的HTML:
<div id = 'top-container'>
<video id='top-vid' autoplay loop width=100% height='auto' class='no-mobile'>
<source src='DS_Intro.mov' type='video/mp4'>
<source src='test.webm' type='video/webm'>
</video>
<div id = 'top-content'>
<div id = 'top-text'>
<div id = 'top-img'>
<img src='ds_white.png' width = "100%" height = 'auto'>
</div>
<h1 id = 'top-slogan'>a boutique video production studio</h1>
</div>
</div>
</div>
我的CSS:
#top-container{
width:100%;
height:100%;
}
#top-content{
max-width:1200px;
margin-right:auto;
margin-left:auto;
}
#top-img{
width:100%;
padding-bottom: 10%;
}
#top-slogan{
text-align:center;
padding-bottom:10%;
font-weight: 100;
color:#5DBCD2;
}
#top-text {
top: 50%;
left: 50%; …推荐指数
解决办法
查看次数
在<p>中垂直对齐img和文本
我不能让跨度中的img和文本垂直对齐:
<p class="login-button">
<input type="submit" id="login-submit" value="Log On" /><img style="padding-left:20px;" id="loadingDiv" src="/Content/ib/images/ajax-loader.gif" />
<span id="error" style="color:red; padding-left:13px;">text </span>
</p>
有任何想法吗？我试过了:
.login-button{ vertical-align:middle; height:30px; line-height:30px;}
.login-button img{ vertical-align:middle;}
推荐指数
解决办法
查看次数
使用本机CSS和HTML设置漏斗堆栈布局的样式
我想显示漏斗堆栈等数据,如下图所示.
我能够使用边框创建锥形,例如:
<div class="taper"></div>
并使用以下CSS:
.taper {
width: 200px;
height: 0px;
border-color: lightgray transparent;
border-style: solid;
border-width: 50px 25px 0 25px;
}
当然,我们的想法是将它包装div.taper在一个容器中,添加其他元素并根据需要定位它们,一些工作但可行.
但是,我不一定知道需要多少行(级别,在这个例子中是7),我真的不想做很多数学来确定每个锥度的宽度等等.
如果有更多的防弹方式这样做？
我不想要一个基于JavaScript/jQuery的解决方案(试图保持这种轻量级)并且更愿意避免使用背景图像(我可能希望稍后对颜色进行换肤/自定义并且不想打扰图像文件).
小提琴参考:http://jsfiddle.net/audetwebdesign/fBax3/
浏览器支持:现代浏览器很好,传统支持,只要它很好地降级.
推荐指数
解决办法
查看次数
是否有任何HTML元素作为典型的内联块存在？
这div是典型的块级元素,span而是内联对应元素.它们是该显示类型的最简单形式,没有其他属性.在很多情况下,我会给他们任何一种风格:
display: inline-block;
这使得他们表现得非常方便.因为div它意味着盒子可以轻松地彼此相邻,同时保持其定义的宽度和高度.因为span我可以用它来制作彩色矩形.该inline-block显示器是伟大的事情太多了,但我从来没有见过,作为一个开始元素inline-block没有别的事情.
图像(img)是,但它们显然不适合与a相同的东西div,它们具有那种风格,但它们实现了不同的目的.
那么有一个我不知道的元素是典型的inline-block,还是遗漏了？
如果没有,为什么？使用inline-block很多,所以似乎应该有一些元素采用这种基本形式.
推荐指数
解决办法
查看次数
仅当元素溢出时才将特定样式应用于该元素
有没有办法有条件地将特定样式应用于元素溢出？
例如，如果我说：
<div>
This text is very long, no really it is extremely long; it just goes on and on and on and on. You might say it's a bit like the Duracell(R) bunny, but without the batteries, and the floppy ears.
</div>
和
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// TODO: is there any way to only apply this rule if the text is overflowing?
div {
background-color: red;
}
有没有办法使用纯 CSS 使背景颜色：红色规则仅在文本溢出时适用？
注意：我可以看到一种使用 javascript 执行此操作的方法；我只是想知道是否有一个纯 …
推荐指数
解决办法
查看次数
HTML - 使子元素忽略父Div的填充
我在容器div中有一个标题div,标题的背景颜色与容器div不同.
<div class="container">
<!-- Header -->
<header class="site-header">
<h1>Site Title</h1>
<h5>Site Description</h5>
<nav class="site-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</nav>
</header>
我的问题是容器div在右侧和左侧有填充,但我希望标题忽略此填充,因此背景颜色将显示完整的宽度而不会被填充切断.
这是我的代码的jsfiddle:http://jsfiddle.net/6e46fzge/
推荐指数
解决办法
查看次数