2

演示

基本上，我正在尝试设置如下所示的内容：

在此处输入图像描述

但是，由于某种原因，我的代码不起作用。最重要的是，在 teh tinkerbin 中，我的箭头图像甚至没有显示。不过它在我的电脑上运行良好，所以我不确定这是为什么。我也尝试了 jsfiddle，但它也没有在那里工作。

我可以让箭头在那里就好了，但我不能让文本垂直居中，更不用说当图像在那里时甚至进入灰色框。这就是让我感到困惑的地方。

HTML：

<div id="answers">
  <div id="arrowcenter"></div><div id="answerstext">Text Next To Arrow</div>

</div><!-- end grayAnswer -->

CSS：

#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
 }

#arrowcenter {
width:71px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
margin-left:-140px; } 

#answerstext {
margin-top:0;
 }
4

8 回答 8

3

你的第一个箭头没有显示，因为你在margin-left:140px;使用#arrow_center

看我的小提琴

只需 1 个<div> 小提琴

于 2012-07-26T06:03:28.643 回答
2

这个答案的灵感来自于 Alien 先生使用较少标记（可选）的答案。id

参考：jsFiddle

HTML：

<span>Masculino</span>

CSS：

span {
    background-image:url('http://fortmovies.com/brazil/arrow.png');  /*  70px x 31px   */
    background-position: 3px 10px;
    background-repeat: no-repeat;
    background-color: #DDDDDD;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    font-family: Arial;
    font-weight: bold;
    font-size: 30px;
    padding: 8px 10px 8px 80px;
}

状态更新：带有 Div 的 jsFiddle 用于导航栏方法

于 2012-07-26T06:47:13.997 回答
1

只需删除margin-left:-140px;并添加float:left;到#arrowcenter

工作演示

于 2012-07-26T05:56:35.283 回答
0

margin-left:-140px;它移动到屏幕外的目的是什么#arrowcenter，删除它，你会没事的。

还将 div 设置为display:inline-block并适当地垂直对齐

#arrowcenter {
    ...
    display:inline-block; 
    vertical-align:middle;
} 
#answerstext {
    ...
    display:inline-block; 
   vertical-align:middle;
}​

http://jsfiddle.net/XEk5d/

于 2012-07-26T05:56:00.853 回答
0

使用标签而不是标签。

标签默认显示：block，防止不同s的内容相邻对齐。标签默认为 display:inline; 哪个更适合您的想法。作为替代方案，您还可以在您的 CSS 中设置这些显示规则。

于 2012-07-26T05:57:07.180 回答
0 
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}

#arrowcenter {
width:75px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
float: left;
} 
#answerstext {
margin-top: 16px;
}
于 2012-07-26T06:00:26.130 回答
0 
    Little bit changes that i made in just in your css as follow, and it is working...

#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
 }

#arrowcenter {
width:120px;
height:31px; float:left;
background-image:url('http://fortmovies.com/brazil/arrow.png');

background-position:0 50%;
background-repeat:no-repeat;
height:100%;
 } 

#answerstext {
margin-top:0; float:left; height:50px; line-height:50px;
 }
于 2012-07-26T06:00:55.800 回答
0

工作演示

或者

使用这个 CSS

    #answers
    {
        width: 220px;
        height: 50px;
        background-color: #DDDDDD;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        margin-top: 20px;
    }
    #arrowcenter
    {
        width: 100px;
        height: 50px;
        background-image: url('http://fortmovies.com/brazil/arrow.png');
        background-position: left center;
        background-repeat: no-repeat;
        float:left;
    }
    #answerstext
    {
        line-height:50px;
        margin-left:10px;
        font-size:20px;
        font-family:Arial;
        font-weight:bolder; 
    }

在 HTML 中使用它：-

<div id="answers">
    <div id="arrowcenter">
        &nbsp</div>
    <div id="answerstext">
        Masculino</div>
</div>

我希望它会有所帮助！:)

于 2012-07-26T06:03:04.850 回答