CSS的值inline和inline-block值之间究竟有什么区别display？
我想问用于显示的使用一些简单的例子<div>和<span>.我已经看到它们都用来标记一个id或一个页面的一部分class,但是我有兴趣知道是否有时候一个优先于另一个.
以下CSS之间的基本区别是什么:
display:inline
还有这个:
display:block
在元素上单独使用这些,我得到相同的结果.
一些HTML代码:
<p id='one'>Hello World how are you. <span>Entrepreneur</span></p>
<p>Hello World how are you. <span>Entrepreneur</span></p>
一些CSS:
#one span {
display: inline-block;
}
p {
font-family: Arial;
font-size: 16px;
width: 200px;
}
第二段表现得像我期望的那样.
然而,第一个行为不同,因为跨度是内联块.
我的问题是,为什么inline-block跨度忽略了 和span前一个词之间的断开线？
谢谢!
这里举例说明.
你如何选择何时使用DIV以及何时SPAN包装？
很多时候我们制作PSD 2 HTML,在某些条件下获得任何效果或包装一些东西以获得所需的效果,我们使用div或span.
我知道div是块级元素并且span是内联级元素,我们可以通过CSS更改显示属性.我也知道div不能进来span.
什么情况下你div作为一个display:inline和span一个display:block？我们应该尽量避免这些情况吗？这在语义上是不正确的吗？
当我们使用空白div或span(内部没有内容)获得一些效果时,哪个是正确的？
TL; DRdisplay在我的CSS中更改默认属性是不好的做法吗？
最近,在我们的项目中,我们必须定位2个标头标签,使它们看起来像一个.它们具有相同的字体大小和相似的样式,因此唯一的问题是如何将一个放在另一个旁边.我们有两个不同的想法,并讨论是否是一个改变默认display属性的好习惯
所以,我们非常基本的代码
<div class="container">
<h1>Header:</h1>
<h2>my header</h2>
</div>
我们希望得到的结果:
标题:我的标题
注意:代码需要包含2个不同的标题,因为在移动版本中我们希望在单独的行中显示它们(因此保留默认值display: block).
display: inline这是非常直接的前进.块元素变为内联,因此它们位于同一行.这种方法的缺点是,两者的默认显示性能h1和h2发生了变化.
floatH1可以使用float: left属性定位在左侧.这种方法使默认显示属性保持不变,但如果.container不足以在单行中同时适应两个标题,则需要一些黑客攻击.
这一切都导致了一个简单的问题:改变displayHTML元素的默认属性是不是一种坏习惯？是否违反标准,应尽可能避免？或者它是我们的面包和黄油,它并不重要,只要代码在语义上是正确的(所以标题放在h1,文章放在article等...)
我想创建一个div根据包含的内容缩小和扩展的简单.
https://jsfiddle.net/qa5dr0x8/
<body>
<div style="border: 1px solid red; padding: 15px; width:auto;">
test text
</div>
</body>
结果:红色框扩展到页面的整个宽度.为什么？
如果这个问题已经在 stackoverflow 上提出过，请纠正我！如果确实如此，我深表歉意，但我已经寻找了一段时间，只找到了方法而不是原因。
{ display: inline-block; }我的问题是：除非指定，否则父 div 似乎会自动占据页面的整个宽度。指定后，它会根据其子元素的宽度调整其宽度。这确实很有用，但我觉得了解为什么会发生这种情况对我来说很重要。这是一些视觉表示的代码。提前致谢！
编辑：我看到有些人已将我的问题标记为重复，但请告诉我另一个问题中的位置解释了为什么显示内联块会自动调整到其子级的高度和宽度。谢谢你！
#wrapper {
border: 1px solid black;
display: inline-block;
}
#child_div {
height: 100px;
width: 100px;
border: 1px solid black;
margin: 10px;
}<div id="wrapper">
<div id="child_div"></div>
</div>由于某些原因，我无法将图片定位在Twitter feed的右侧。我将其相对放置在twitter feed的DIV标签内，但仍在下面。这是实时链接：http : //www.lymemd.org/indexmm6.php
我的CSS：
#twitterfeed {
position: relative;
}
#drshow {
position: relative;
left: 200px;
}
我的HTML：
<div id="twitterfeed">
<a class="twitter-timeline" width="460" height="250" href="https://twitter.com/Lyme_MD"
data-widget-id="453198382664667137">Tweets by @Lyme_MD</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s); js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div id="drshow">
<img src="images/drshow.gif" alt="Diane Rehm Show Image" width="169" height="145">
</div>
</div>
HTML中的每个元素都有（默认）显示模式，例如块，内联等。
例如div元素是block元素，而span元素是内联元素，现在我需要一种显示模式，例如button元素（或具有type =“ button”属性的输入），有点像inline，因为您可以将其中一些放在一行中，但是与内联元素可以具有width属性。
好，够了，我的问题，HTML按钮有哪些显示模式？如何设置元素的样式，使其像按钮一样显示？