Html 使用 CSS 将 div 转换为 span
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3820212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert div to span with CSS
提问by Yustme
I have a few divs which makes a little bit too spacey between the footer and the body. So i want to convert one div to a span. But when I do that, it messes the footer's content a bit up.
我有几个divs，这使得页脚和正文之间的空间有点过大。所以我想将一个 div 转换为一个跨度。但是当我这样做时，它会使页脚的内容有点混乱。
How can i do this and keep the styles that already have been defined for the footer?
我怎样才能做到这一点并保留已经为页脚定义的样式？
Thanks in advance!
提前致谢！
Edit
编辑
div.footer {
width: 986px;
margin: 0 auto;
padding-bottom:18px;
border: 0;
text-align: left;
color:#000000;
}
回答by Spudley
As you already know, the difference between a <div>and a <span>is just that one defaults to display:block;and the other to display:inline;. To make one act as the other, just set the display style to the other type.
正如您已经知道的，a<div>和 a之间的区别<span>只是一个默认为 ，另一个默认display:block;为display:inline;。要使一个充当另一个，只需将显示样式设置为另一种类型。
However, you already said you tried this and it didn't achieve the effect you were looking for. There is another display property, which is less well known, but provides a half-way house between the two:
但是，您已经说过您尝试过此方法并没有达到您想要的效果。还有另一个展示属性，它鲜为人知，但提供了两者之间的中途之家：
display:inline-block;
What it does is display it inline, but still with block-like properties. (This is basically how an <img>tag works by default).
它所做的是内联显示，但仍然具有块状属性。（这基本上<img>是默认情况下标签的工作方式）。
Could this be the answer you're looking for?
这可能是您正在寻找的答案吗？
回答by Kyle
To convert a div to a span, simply add:
要将 div 转换为 span，只需添加：
.myDiv
{
display: inline;
}
But I'm really not sure that this is the solution you're after.
但我真的不确定这是你想要的解决方案。
回答by Jeaf Gilbert
Quote:
引用：
there are 2 divs next to eachother which creates a hugh gap between the body and the footerbody and the footer
有 2 个彼此相邻的 div，这在正文和页脚之间产生了一个巨大的间隙，以及页脚
Solutions:
解决方案：
- Remove empty div(s) from HTML
- Remove empty div(s) by adding
display:none - Reduce
heightof the div(s) - Reduce
marginorpaddingof the div(s) - Set
position:relative; top:-[yourownnumber]pxto.footer
- 从 HTML 中删除空的 div
- 通过添加删除空 div(s)
display:none - 减少
heightdiv(s) - 减少
margin或paddingdiv(s) - 设置
position:relative; top:-[yourownnumber]px为.footer
回答by Dawn
If there is too much space between the footer and the body, have you looked at what the margins and paddings are on the affected divs? Does something have a height or a min-height that is making some of the content within the body taller than the natural end of the content? Firebug is a great tool for this.
如果页脚和正文之间的空间太大，您是否查看了受影响的 div 上的边距和内边距是什么？某些东西是否具有高度或最小高度，使正文中的某些内容比内容的自然末端高？Firebug 是一个很好的工具。
Div is a block element. Other block elements are paragraphs, headings, lists, etc. Span is an inline element. Other inline elements are strong, image, anchor, etc. You still need the body to be contained in a block-level element.
Div 是块元素。其他块元素是段落、标题、列表等。Span 是一个内联元素。其他内联元素是 strong、image、anchor 等。您仍然需要将 body 包含在块级元素中。
回答by Ben Fransen
Try adding overflow:auto;to your span. Also add display:block;
尝试添加overflow:auto;到您的跨度。还添加display:block;
回答by akhyar azni
How if add this:
如果添加这个如何：
position:relative /*optional*/
float:left;
left:0px;
I always do this before i know to use span when I first learn css I always do to my element content.
当我第一次学习 css 时，我总是在我知道使用 span 之前这样做，我总是对我的元素内容这样做。
