相关疑难解决方法(0)

bikesheddingCSS3属性还有其他选择吗？它似乎还没有得到支持.

在过去的1.5小时里,我一直在尝试我所知道的一切,并且无法想出这一点.实际上,据我所知,边距和填充为 0,但是,包含div是到目前为止,莫名其妙地比包含图像宽4px和1px.我不知道它来自哪里.

很少有可能导致这种情况的因素:

1. 我通过javascript将图像的最大宽度和最大高度设置为窗口的大小.
2. 我正在使用table,table-cell和inline-blocks的组合来按照我需要的方式设置排版.
3. 还使用100%宽度和高度的body和html
4. 这是一个Tumblr主题定制(虽然从头开始)

代码方面,很难将整个批次放在这里,所以现在,我只是给出链接.

希望如果能够理解这一点,我将能够在这个问题中发布问题代码,以便将来参考.

链接:http://syndex.me

谢谢

我正试图在我的网页上做一个iphone风格的swipey事情.我的想法是,在我的侧边栏中,如果我点击一个链接,它会将侧边栏放在左边,以显示该链接的去向.为此,我将并排创建两个侧边栏,可见侧边栏和将隐藏在另一个元素后面的下一个侧边栏.

可以在http://jsfiddle.net/gpcC6/7/找到侧边栏的示例

我遇到的问题是,当窗口调整大小时,第二个侧边栏位于第一个侧边栏下方.我想保持向右,即使这意味着它偏离了屏幕的一侧.这可能吗？谢谢

可能重复:
如何消除CSS中内联元素之间的间距？

如果我有两个并排的按钮,如下所示:

<input type="button">Test1</input>
<input type="button">Test2</input>

即使使用css重置,我在它们之间也会有一个小的差距.

我发现它是由空白区域引起的,如果我有这种格式的html:

<input type="button">Test1</input><input type="button">Test2</input>

一切都按预期工作,没有差距.

如何摆脱这个烦人的白色空间或否定它的效果而不格式化我的html可怕？

我正在尝试使用宽度设置为%的css网格(因此我可以响应地使用它)并且不使用浮动(个人不喜欢!).

在这个例子中,我使用csswizardry-grid并添加了适当的变量.您可以在github页面上查看链接的demo.

没有提到为网格分配宽度的"容器"类,所以我添加了.container(这也是csswizardry-grid演示所具有的)具有最大宽度(稍后准备其他断点).容器有左右填充以允许填充:留在.grid__item内.

.container {
    margin: 0 auto;
    padding: 0 $gutter;
    max-width: 960px;
}

scss:

.grid__item {
    display: inline-block;
    padding-left: 32px;
    vertical-align: top;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.desk--one-third { width: 33.333%; }

另请注意,box-sizing:border-box不在除csswizardry-grids.scss规范之外的任何其他元素上.

我的加价:

<div class="container"> 
    <div class="grid">
        <div class="grid__item desk--one-third">
            <h1>Column 1</h1> 
        </div>
        <div class="grid__item desk--one-third">
            <h1>Column 2</h1> 
        </div>
        <div class="grid__item desk--one-third">
            <h1>Column 3</h1> 
        </div>
    </div>
</div>      

问题是:在firefox,safari和chrome中,最后一个.grid__item就会消失.

我所看到的:至少几个像素的'.grid__item之间的神秘差距.参见附页截图:

!(http://dl.getdropbox.com/u/7408773/Screen%20Shot%202013-05-10%20at%2012.51.06%20AM.png)

有人可以为我解释一下吗？

我想显示内联的四个按钮,它们之间没有任何间距.我有一个显示当前行为的jsfiddle.简而言之,以下HTML/CSS:

<div>
    <input id="unconfirmedYes" type="button" value="10%" />
    <input id="confirmedYes" type="button" value="98% YES" />
    <input id="confirmedNo" type="button" value="2% NO" />
    <input id="unconfirmedNo" type="button" value="90%" />
</div>

div input[type=button] {
    display: inline;
    margin: 0;
    padding: 0;
}
#unconfirmedYes, #unconfirmedNo {
    width: 10%;
}
#confirmedYes, #confirmedNo {
    width: 40%;
}

实际上将按钮向上排列,但它们之间仍然有间距.如何摆脱那个间距,使它们相互叠加？

我的定位main-bar,并side-bar用70-30比为下:的jsfiddle

.main-bar, .side-bar{
	position: relative;
	margin:0; padding: 0;
	outline: 0;
	display: inline-block;
	border:none;
    background:#CCC
}
.main-bar{width: 70%}
.side-bar{width: 30%}

/* This Works

.side-bar{width: 29%}

*/

<div class="main-bar">
    I am the King!
</div>

<div class="side-bar">
   I am not less!
</div>

有趣的是,它适用于70-29比率.我错过了什么？

提前抱歉愚蠢的问题 - 我有一个容器和5个内部div.当内部div只有文本内容时,它看起来像这样:
但是,如果我从所有div中删除文本内容并首先添加带有跨度的div,它将如下所示
如果除了第一个(具有混合内容)之外的所有div都有文本内容 - 如下所示:
容器的CSS:

.list {
    display: inline-block;
    font-size: 0;
    height: 100%;
    min-width: 100%;
    overflow: hidden;
    position: relative;
    right: 0;
    white-space: nowrap;
}

内部div的CSS:

.list > div {
    background-image: url();
    background-size: cover;
    box-sizing: padding-box;
    display: inline-block;
    font-size: 15px;
    height: 100%;
    max-height: 752px;
    max-width: 1280px;
    padding: 0.7% 1.3% 0.3%;
}

在这里,您可以查看整个HTML和CSS.

发生了什么,是不是有些textNodes搞砸了？

您可以在下面看到包含3行内联块元素的代码.这些线条绝对相同.但第三行的行为​​很奇怪.请在代码片段中亲自查看.第三条线有什么问题？为什么显示这么奇怪？

谢谢.

.partners {
  width: 940px;
  text-align: center;
  margin: 95px auto 0 auto;
}
.partners__h2 {
  color: #333;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  margin-bottom: 32px;
}
.wrap {
  background: #a1a1a1;
}
.partners li {
  display: inline-block;
  vertical-align: text-top;
}
.partner__wrap {
  bottom: 0;
  width: 100%;
  text-align: center;
}
.partner__name {
  display: block;
  float: left;
  width: 100%;
  font-weight: bold;
  color: #333;
  font-size: 14px;
  margin-bottom: 0px;
}
.partner__description {
  font-family: Roboto;
  font-weight: 300;
  color: #666;
  font-size: 14px;
  text-align: center;
  float: left; …

.items {
  width: 300px;
  background: green;
}
.item {
  display: inline-block;
  width: 300px;
}
.empty, .not-empty {
  background: red;
  width: 50px;
  height: 30px;
}

<div class="items">
  <div class="item">
    <div class="empty"></div>
  </div>
  <div class="item">
    <div class="not-empty">1</div>
  </div>
  <div class="item">
    <div class="empty"></div>
  </div>
</div>

请运行代码片段以查看问题。

如果 .item 元素有一个空的 div 子元素，你可以看到它有一个 3px 高度的空格线。但是如果 .item 元素有一个非空的 div，那么空格线就消失了。

真的很难理解，请帮忙。