相关疑难解决方法(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解决吗？

我只是不能让类按钮align-right在中间垂直对齐.

HTML:

<div class="panel-footer">
    <span style="width:100%;" class="header-footer-item">  
        <button class="align-right" type="button">Save</button>
    </span>    
</div>

CSS:

.panel-footer {
    height: 70px;
    vertical-align: middle;
    border: solid;
}

.header-footer-item {
    display: inline-block;
    line-height: 70px;
    border: solid red;

}

.align-right {
    float: right;
}

.align-middle {
  vertical-align: middle;
}

这是jsfiddle:https://jsfiddle.net/d1vrqkn9/2/

如果我float:right从按钮中移除它,它可以工作,但我希望它在右边.

如果我改变header-footer-item从inline-block到inline那么浮动按钮呈现其包含的元素,我认为是对上述规则:(在接受的答案#4这里如何垂直方向的中间对齐浮动无名高地的要素是什么？) -尽管父元素是然后在中间垂直对齐.

我已根据CSS添加行高度垂直对齐不适用于浮点数

最大的问题是 - 我该如何解决？我也有兴趣知道为什么使子元素(按钮)向右浮动使得父元素(span)不再在包含div中垂直对齐(但仅当它inline-block不是时inline)....最后,不是'违反规则'(https://www.w3.org/TR/CSS21/visuren.html#float-rules,#4),浮动箱的外部顶部要高一些比其包含块的顶部？......显然是这样header-footer-item的inline.

有很多关于垂直调整事物的问题,你认为他们会用"认真地,垂直地对齐这个东西 - 无论什么,没有抱怨,只是这样做: …

我正在尝试解决vertical-align涉及浮动div 的问题.所有高度都是未知的 - 因为它们只是用内部文本行隐式形成.

这是代码:https://jsfiddle.net/zjzyryae/

#test {
  background: yellow;
  display: inline-block;
}
#block1 {
  float: left;
  display: inline-block;
  background-color: grey;
}
#block2 {
  background-color: green;
  float: left;
}

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div id="block2">
    sample
  </div>
</div>

我需要垂直居中"block2"div - 当然只有CSS(没有JavaScript).

看到"block1"div隐式设置父"test"块高度 - 这使得与所描述的类似情况(其中此高度以像素显式设置)的主要区别.

也许这个问题在某个地方得到了解决,但我没有找到完全相同的情况.我考虑的类似例子是不同的.

这个中心垂直未知高度文本中未知高度div实际上包括硬编码高度设置 - 这与我的情况大不相同.

那一个如何垂直中间对齐未知高度的浮动元素？也是不同的情况,不适合我的情况 - 因为父高度等于浮动divs高度(这比我的情况容易得多).

我试着玩不同的display:table设置 - 但仍然没有运气.