相关疑难解决方法(0)

鉴于此HTML和CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

结果,SPAN元件之间将存在4像素宽的空间.

演示: http ://jsfiddle.net/dGHFV/

我理解为什么会发生这种情况,而且我也知道我可以通过删除HTML源代码中SPAN元素之间的空白来摆脱那个空间,如下所示:

<p>
    <span> Foo </span><span> Bar </span>
</p>

但是,我希望CSS解决方案不要求HTML源代码被篡改.

我知道如何用JavaScript解决这个问题 - 通过从容器元素(段落)中删除文本节点,如下所示:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示: http ://jsfiddle.net/dGHFV/1/

但是这个问题可以单独用CSS解决吗？

我有两个内嵌块div元素,它们是相同的,彼此相邻.然而,尽管边距设置为0,但两个div之间似乎有一个4像素的神秘空间.没有父div影响它们 - 发生了什么？

CSS

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
}

这就是我想要的样子:

HTML/CSS中是否有任何东西告诉浏览器完全忽略空格？

很多时候,当你想把两个图像放在一起时 - 你会拼命地保持HTML的可读性,但浏览器会在它们之间留一个空格.

所以不是这样的:

<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />

你最终得到了这个

<img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" />

哪个太可怕了!

我有以下HTML:

    <ul>
        <li>
        <div>first</div>
        </li>
        <li>
        <div>first</div>
        </li>
        <li>
        <div>first</div>
        </li>
        <li>
        <div>first</div>
        </li>
    </ul>

以及以下css规则:

        ul {
            padding: 0;
            border: solid 1px #000;
        }
        li {
            display:inline-block;
            padding: 10px;
            width: 114px;
            border: solid 1px #f00;
            margin: 0;
        }

        li div {
            background-color: #000;
            width: 114px;
            height: 114px;
            color: #fff;
            font-size: 18px;
        }

出于某些奇怪的原因,列表项在Firefox和Chrome中都会显示边缘.查看firebug,列表项目根本没有任何边距,但它们之间似乎存在空隙.

如果我稍后通过javascript使用添加更多列表项

$('<li><div>added via js</div></li>').appendTo($('ul'));

新元素周围没有出现"边距":

怎么知道这里到底发生了什么？

请参阅以下示例:http: //jsfiddle.net/Gv6w3/

正如你所看到的,这是一个设置为display:inline-block;All 的菜单项的简单示例我想要做的是让菜单项相互冲洗 - 我将边距设置为0px,但我无法摆脱它们之间的间距？到底是怎么回事？？

编辑:刚刚注意到重复,我的坏:如何删除内联块元素之间的空格？,显示:内联块额外保证金

我正在尝试学习如何在没有Bootstrap的帮助下实际使用CSS.

我有以下内容:(可以在这里查看:http://plnkr.co/edit/FTCft1YOfQ4xy7FKWEHE？p = preview)

<div class="block">
  <span class="pull-left">George</span>
  <span class="pull-right">$23.20</span>
</div>

<div class="block">
  <span class="pull-left">Carl</span>
  <span class="pull-right">$4.81</span>
</div>

<div class="block">
  <span class="pull-left">Steve</span>
  <span class="pull-right">$0.34</span>
</div>

和CSS ......

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.block {
    display: block; /* since, div, I don't need this right ?*/
    background-color: #87CEEB;
    width: 100%;
}

如果我使用Bootstrap,我可以通过将我的html放在containerdiv中而不是使用我的自定义类来实现所需的效果block,添加类btn和btn-block.

我想让名称在左边垂直对齐,价格在右边垂直对齐.我错过了什么？

有点像:

George                                     $23.20
Carl                                        $4.81
Steve                                       $0.34

请不要提及表,就像我说的,我可以使用bootstrap并将上面的html包装进去div.container,然后使用button.btn.btn-block …

因此,当使用内联块而不是浮动时,我阅读了关于使间距消失的解决方案:显示:内联块额外边距和http://css-tricks.com/fighting-the-space-between-inline-block - 元素/.

因此,如果您正在使用haml并希望将结束标记放在与下一个开始标记相同的行上,那么除了切换到ERB之外还有解决方案吗？

(不,我不想弄乱父容器的css属性,并且必须在所有子元素中覆盖它).

这打破了(锚之间有间距).

因此,尽管建议使用内联块而不是浮点数来进行此类布局,但似乎浮动仍然是要走的路,特别是在使用haml时？

CSS

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

HTML

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

解决方法(css-tricks one):

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

要么

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

另一个:

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

当html代码没有'美化'时,它看起来像

<div><img src="img1.jpg"/><img src="img2.jpg"/></div>

然后这些图片呈现为

|=||=| //no gap between

美化后http://ctrlq.org/beautifier/

<div>
    <img src="img1.jpg"/>
    <img src="img2.jpg"/>
 </div>

他们是这样渲染的

|=| |=| // gap (space) between

因此,相同的代码呈现不同.我想知道如何为html内联元素(和html)做正确的语法？

(内联可能是'块'元素),所以我不知道,如何编写人类可读和正确呈现的代码(至少内联元素之间没有间隙).

有什么建议？=)

我有一个容器div和5个子div

{display: inline-block}

所以它们彼此相邻.每个儿童div的高度为20px,但容器的高度增加到24px.为什么会这样？

小提琴:http://jsfiddle.net/VHkNx/

使用时为什么div之间有空格display: inline-block,如下例所示:http://jsbin.com/IhULuZO/1/edit.

我知道我可以使用float:left,但如果可能的话,我想摆脱没有浮动元素的空白区域.