CSS: display:inline-阻止未正确对齐 div

Question

我在让 div 正确对齐时遇到了一些问题，尽管我知道基本想法是正确的。

我想要的是较大的 div（绑定）将标题、奖金和图像都放在同一行，但目前奖金显示在标题字段下方。有什么想法吗？

有问题的CSS：

.bound
{
   position:relative;
   z-index:1000; 
   border-style:solid; 
   border-width:1px; 
   padding:1%; 
   border-color:#0f0f0f; 
   border-radius:6px;
}

.event 
{
   border-style:none; 
   width:100%; 
   height:70px; 
   line-height: 60px;
   position: relative;
}

.title
{
   display:inline-block !important;
   height:100%;
   width:30%;
   min-width:250px;
   position: relative;
}

.bonus
{
   display:inline-block !important;
   height:100%;
   width:15%;
   min-width:200px;
   text-align:center;
   position: relative;
}

#click
{
   position:absolute; 
   width:100%; 
   height:60px; 
   z-index: 1;
}

HTML的简化版本：

<div id="bound">
    <div id="event">
        <a href="title link"><span id="click"></span></a>
        <img src="files/image.png" align="right">
        <div id="title">
            <span style="font-size:150%; font-weight:bold;">Title</span>
        </div>
        <div id="bonus">
            <span style="font-size:150%; font-weight:bold; color:#32CD32;">Bonus</span>
        </div>
        <br />
    </div>
</div>

提前致谢。

Answer 1

因为默认情况下 div 是 display:block。使用 display:inline-block 将在同一行显示两者。

#event > div {
    display: inline-block;
}

Fiddle

Answer 2

将内联样式 float:left 设置为标题的范围：

<span style="font-size:150%; font-weight:bold;float:left">Title</span>

Answer 3

要将所有内容都放在一行中，只需添加（尽管不建议使用 id 进行样式设置）：

#event > *{
    float:left;
}

http://jsfiddle.net/3tbnstmq/1/

Answer 4

嘿有一个小错误。当 id 用于样式时， # 用于引用其样式。只需将 css 中的 . 更改为 # 即可。这里是working demo

Answer 5

我认为您在 css 中输入了“.” 'title class' 而不是“#”。因为从我的角度来看，在您的 html 中，您已将 'title' 用作 'id'，而在 css 中，您可以使用“#”来应用样式。

在 css class 添加 'float:left' 属性。还将您的图像和锚标记放入 'Div' 并添加样式 'float:left'。

Answer 6

替换为：

.title
{
   display:inline-block !important;
   height:100%;
   width:30%;
   min-width:250px;
   position: relative;
}

.bonus
{
   display:inline-block !important;
   height:100%;
   width:15%;
   min-width:200px;
   text-align:center;
   position: relative;
}

至此

#title
{

   height:100%;
   width:30%;
   min-width:250px;
   position: relative;
   float:left;
   border:solid blue 1px;
}

#bonus
{

   height:100%;
   width:15%;
   min-width:200px;
   text-align:center;
   position: relative;
   float:left;
   border:solid blue 1px;
}

必须是“#”而不是“.”因为您试图对齐两个 div 内的元素，并且在您的代码中使用了 ID 并添加了 float 使其成为 aline

希望这对您有所帮助

Answer 7

首先，您在某些地方做错了，例如您使用了 id='title' 并为 class '.title' 编写了样式，因为它没有实现。如果你只是想把它排成一行然后放 #title { 浮动：左； } #bonus { 浮动：左； } 在当前的样式中，#title div 和#bonus div 占了 100% 的宽度，这就是为什么不在一条线上的原因。

CSS: display:inline-阻止未正确对齐 div

CSS: display:inline-block not aligning divs correctly

html

css

layout