Div标签在一行中

时间：2016-12-12 13:17:56

标签： html css

我遇到了关于css div标签的问题。

这是我正在使用的代码。

＆＃13;
＆＃13; 
    #title {
      float: left;
      background-color: #2e3539;
      color: white; 
    }
    
    .arrow-down {
      float: left;
      width: 0; 
      height: 0; 
      border-left: 15px solid transparent;
      border-right: 0px solid transparent;
      border-bottom: 15px solid #2e3539;
    
    }
    
    .arrow-up {
      float: left;
      width: 0; 
      height: 0; 
      border-left: 0px solid transparent;
      border-right: 15px solid transparent;
      border-top: 15px solid #2e3539;
    
    }
＆＃13; 
 <DIV class=arrow-down></DIV>
    <DIV id=title>{Title}</DIV>
    <DIV class=arrow-up></DIV>
＆＃13;
＆＃13;
＆＃13;

这是输出

title bar

我正在尝试将所有这个Div标记放在一行中，因此Image应该如下所示： -

enter image description here

伙计们请帮助，我不明白我在这里做错了什么。

伙计们，我尝试了一些建议，但遇到了同样的问题，所以我在这里添加完整的代码请看看。

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META content="text/html; charset=unicode" http-equiv=Content-Type>
<META name=GENERATOR content="MSHTML 11.00.9600.18427"></HEAD>
<BODY>
<H1>{First name} {Last name}</H1>
<DIV class=arrow-down></DIV>
<DIV id=title>{Title}</DIV>
<DIV class=arrow-up></DIV><BR>
<DIV id=phone>
<P style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><SPAN><BR>off:</SPAN> {mobile no} | <SPAN>mob:</SPAN> {office number}</P><BR></DIV>
<DIV id=address><SPAN>company</SPAN><BR> {address}
<BR>{country}<BR><BR></DIV>
<STYLE>
@import url('http://fonts.googleapis.com/css?family=Lato:400,700');

body {
    font-size:12px;
    color: black;
    font-family: 'Lato', sans-serif;
}

h1 {
    color: #77bc1f;
    margin: auto;
    padding-left: 14px;
    font-size: 17px;
}

span {
    color: #77bc1f;
    font-weight: bold; 

}

#title {
  float: left;
  background-color: #2e3539;
  color: white; 
}
.arrow-down {
    float: left;
    width: 5px;
    height: 0px;
    border-left: 15px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 21px solid #2e3539;
}
.arrow-up {
  float: left;
  width: 5px; 
  height: 0; 
  border-left: 0px solid transparent;
  border-right: 15px solid transparent;
  border-top: 21px solid #2e3539;
}
</STYLE>
</BODY>

提前谢谢。

5 个答案:

答案 0 :(得分：1)

添加一个应包含 "Update tableX set value = " & iif(value, "true", "false") 的额外div并使用ribbon。我希望这就是你所需要的：

更新：

您还需要将display: inline-block上的行高设置为#title .arrow-down和border-bottom .arrow-up 宽度 

border-top
@import url('http://fonts.googleapis.com/css?family=Lato:400,700');
body {
    font-size:12px;
    color: black;
    font-family: 'Lato', sans-serif;
}

h1 {
    color: #77bc1f;
    margin: auto;
    padding-left: 14px;
    font-size: 17px;
}

span {
    color: #77bc1f;
    font-weight: bold; 

}

.container{
  font-size: 0;
}
#title {
  display: inline-block;
  vertical-align: top;
  background-color: #2e3539;
  color: white; 
  font-size: 12px;
  line-height: 15px;
}
.arrow-down {
    display: inline-block;
    vertical-align: top;
    width: 5px;
    height: 0px;
    border-left: 15px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 15px solid #2e3539;
}
.arrow-up {
  display: inline-block;
  vertical-align: top;
  width: 5px; 
  height: 0; 
  border-left: 0px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #2e3539;
}

答案 1 :(得分：0)

请避免使用float: left并改为使用display: inline-block：

.arrow-down {
  display: inline-block; //added this line
  float: left;
  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 15px solid #2e3539;

}

#title {
  /*float: left;*/ //remove
   display: inline-block;
  background-color: #2e3539;
  color: white; 
}

浮动的另一个解决方案：由其他人在这里发布的左侧也可以使用，但将来会给你带来更多麻烦。

答案 2 :(得分：0)

调整边框宽度，看看下面的代码段（您发布的代码相同）：

<HTML><HEAD>
<META content="text/html; charset=unicode" http-equiv=Content-Type>
<META name=GENERATOR content="MSHTML 11.00.9600.18427"></HEAD>
<BODY>
<H1>{First name} {Last name}</H1>
<DIV class=arrow-down></DIV>
<DIV id=title>{Title}</DIV>
<DIV class=arrow-up></DIV><BR>
<DIV id=phone>
<P style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><SPAN><BR>off:</SPAN> {mobile no} | <SPAN>mob:</SPAN> {office number}</P><BR></DIV>
<DIV id=address><SPAN>company</SPAN><BR> {address}
<BR>{country}<BR><BR></DIV>
<STYLE>
@import url('http://fonts.googleapis.com/css?family=Lato:400,700');

body {
    font-size:12px;
    color: black;
    font-family: 'Lato', sans-serif;
}

h1 {
    color: #77bc1f;
    margin: auto;
    padding-left: 14px;
    font-size: 17px;
}

span {
    color: #77bc1f;
    font-weight: bold; 

}

#title {
  float: left;
  background-color: #2e3539;
  color: white; 
}
.arrow-down {
    float: left;
    width: 5px;
    height: 0px;
    border-left: 15px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 15px solid #2e3539;
}
.arrow-up {
  float: left;
  width: 5px; 
  height: 0; 
  border-left: 0px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #2e3539;
}
</STYLE>
</BODY></HTML>

希望这有帮助！

答案 3 :(得分：0)

只需更改两个箭头的边框，从21px到18px，这样就可以了。

    #title {
      float: left;
      background-color: #2e3539;
      color: white; 
    }

    .arrow-down {
        float: left;
        width: 5px;
        border-left: 15px solid transparent;
        border-right: 0px solid transparent;
        border-bottom: 18px solid #2e3539;
    }

    .arrow-up {
      float: left;
      width: 5px; 
      border-left: 0px solid transparent;
      border-right: 15px solid transparent;
      border-top: 18px solid #2e3539;
    }
    <div class=arrow-down></div>
    <div id=title>{Title}</div>
    <div class=arrow-up></div><BR>

答案 4 :(得分：0)

确保line-height与两个三角形的border-top和border-bottom相匹配，以便三角形与#title元素一样高。如果这三个元素不是同样高，则无法正确对齐它们。

此解决方案在::before元素中使用::after和inline-block，而不是连续三个float。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>

<body>

<style type="text/css">
@import url('http://fonts.googleapis.com/css?family=Lato:400,700');

body {
    font-size:12px;
    color: black;
    font-family: 'Lato', sans-serif;
}

h1 {
    color: #77bc1f;
    margin: auto;
    padding-left: 14px;
    font-size: 17px;
}

span {
    color: #77bc1f;
    font-weight: bold; 
}

#title {
    display:inline-block;
    color: white;
    position: relative;
    background: #2e3539;
    margin:0 21px;
    padding:0 3px;
    line-height:15px;
}

#title::before,
#title::after {
    content:"";
    display:block;
    position:absolute;
    top:0;
    width:0;
    height:0;
}

#title::after {
    right:-21px;
    border-left: 21px solid #2e3539;
    border-right: 0px solid transparent;
    border-bottom: 15px solid transparent;
}

#title::before {
    left:-21px;
    border-left: 0px solid transparent;
    border-right: 21px solid #2e3539;
    border-top: 15px solid transparent;
}

#phone {
    font-size: 10pt;
    font-family: Arial, sans-serif;
}

</style>

<h1>{First name} {Last name}</h1>
<div id="title">{Title}</div>
<div id="phone">
    <span>off:</span> {mobile no} | <SPAN>mob:</SPAN> {office number}
</div>
<div id=address>
    <span>company</span><br>
    {address}<br>
    {country}<br><br>
</div>

</body>
</html>
相关问题
最新问题