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

可能重复:
内联块列表项中的不需要的边距
如何从HTML中删除"不可见空间"

为什么内联块列表项中有空格？无论我如何将我的列表项目放入菜单,我总是得到空格.

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>

可能重复:
内联块列表项之间的空格

我有一个我的HTML代码的JSFiddle演示.这是这里的代码:

<span style="display: inline">Hello Wo</span>
<span style="display: none;"></span>
<span style="display: inline">rld</span>?

我遇到的问题是在Hello World中'o'和'r'之间插入了一个额外的空间!该display样式设置为无,所以有人告诉我怎样才能得到Hello World!,而没有空间句话？

这是我的HTML:

<div class="scrollingBox">
    <div class="container">
         <div class="item">Item</div>
         <div class="item">Item</div>
         <div class="item">Item</div>
         <div class="item">Item</div>
    </div>
</div

这是我的CSS:

.scrollingBox {
    height:100px;
    width:300px;
    overflow:auto;
}
.item {
    float:left;
    height:60px;
    margin:5px;
    width:100px;
}

该.container可以包含任意数量的.item秒.

我现在的问题是.container永远不会比它更宽.scrollingBox,滚动框最终会有一个垂直滚动条,而.items最终会垂直堆叠.我给出.container一个固定的高度,但是.items堆栈垂直超出这个固定的高度.

我想要.container没有固定的宽度,所以它可以采取任何数量的项目.我希望滚动条是水平的,我也希望.items水平堆叠.

我的问题:

我应用什么CSS .container来.item水平堆栈？

我在jsfiddle上有这个代码.

如您所见,第3或第4 li项以新行开始(取决于您的窗口宽度).但由于高度不同,这条新生产线并未在生产线的起点开始.

如何在CSS新行中开始始终在行的开头？

<ul>
    <li>
        <div class="imgplace" style="height:200px;">here is an img in real</div>
        <input type="text" id="img_01" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:190px;">here is an img in real</div>
        <input type="text" id="img_02" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:180px;">here is an img in real</div>
        <input type="text" id="img_03" value="blahblah" /> …

我正在开发一个网站,我想要一个像上面的图像菜单.这就是我尝试过的:jsFiddle

HTML

         <div class="">
            <ul class="header-menu-ul">
            <li class="header-menu menu-link1-color"><a href="" class="header-menu-link ">ABC's Office</a></li>
            <li class="header-menu menu-link2-color"><a href="" class="header-menu-link ">Benefits</a></li>
            <li class="header-menu menu-link3-color"><a href="" class="header-menu-link ">NEW Brand</a></li>
            <li class="header-menu menu-link4-color"><a href="" class="header-menu-link ">Editorial</a></li>
            <li class="header-menu menu-link5-color"><a href="" class="header-menu-link ">Manger</a></li>
            <li class="header-menu menu-link6-color"><a href="" class="header-menu-link ">Extra</a></li>
            </ul>

            </div>

我面临的问题是它在<li>标签之间占据了一席之地.

我在这里遇到了一些问题.我为此尝试了很多不同的修复,但似乎都没有.我想在另一个div的中间对齐div的内容.

我想只使用auto或%值,因为我想让网站也用于移动设备.

这是我到目前为止的代码:http://codepen.io/anon/pen/xHpaF/ 我想让那些红色框与包装div的中心对齐.

如果有人可以帮助我.谢谢!