Question

我有相同的CSS类.como-fazemos-mini-title，行为方式不同，我真的不知道发生了什么。

你可以亲眼看到：http://baskra.com/teste/teste.html

在 Como Fazemos 一节中， Criatividade 这个词及其下面的文字与其他文字没有水平对齐，但我认为没有理由。

我错过了什么？

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="style.css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>bask.ra</title>

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

<!-- COMECO DO NIVO SLIDER -->
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" />
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!-- FIM DO NIVO SLIDER -->

<!-- COMECO DO MENU FIXO -->
<script type="text/javascript">
jQuery("document").ready(function($){

    var nav = $('.menu-fundo');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 0) {
            nav.addClass("f-menu");
        } else {
            nav.removeClass("f-menu");
        }
    });

});
</script>
<!-- FIM DO MENU FIXO -->

</head>

<body>

<div class="menu-fundo">
<div class="menu">

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

<div class="logo">

<img src="images/logo.png" />

</div>

        <ul id="menutop">
              <li><a href="#contato">CONTATO</a></li>
              <li><a href="#equipe">EQUIPE</a></li>
              <li><a href="#quem">QUEM SOMOS</a></li>
              <li><a href="#como">COMO FAZEMOS</a></li>
              <li><a href="#que">O QUE FAZEMOS</a></li>
        </ul>
    </div>
    </div>

<script>
$("#menutop a").click(function(){
   var menuid = $(this).attr("href");
   $("body, html").animate({scrollTop: $(menuid).offset().top - $('.menu').height() }, "slow");
   return false;
});
</script>



<div id="slider" class="nivoSlider theme-default">
    <img src="images/slide1.png"/>
    <img src="images/slide2.png"/>
    <img src="images/slide3.png"/>
</div>

<div class="row">

<div class="o-que-fazemos">
  <a id="que"></a>
  <h1 class="o-que-fazemos-title">O QUE FAZEMOS?</h1>
 <h1 class="o-que-fazemos-subtitle">COMUNICAÇÃO + DESIGN</h1>


<div class="o-que-fazemos-content-1">

 <br />
<br />

<b>SUA MARCA VAI ALÉM.</b><br /><br />

<b><i>Consolidar uma marca vai além.</i></b><br /><br />

Além de um simples nome, razão ou definição, consolidar uma marca depende de uma experiência. E é a partir disto que as ideias surgem. Um novo conceito e uma nova definição de negócio.<br />
A <b>BASK.RA</b> nasceu para pensar, criar e gerenciar o posicionamento da sua empresa no mercado.

</div>


<div class="o-que-fazemos-content-2">

<img src="images/oqfazemos.png" />

</div>

</div>
</div>

<div class="row">
<div class="como-fazemos">
  <a id="como"></a>

  <h1 class="como-fazemos-title">COMO FAZEMOS?</h1>

  <div class="como-fazemos-content-1">
  <img src="images/comofazemos-content1.png" /><br />
<div class="como-fazemos-mini-title">CRIATIVIDADE</div><br />
A conexão entre o estímulo e o resultado.
  </div>

  <div class="como-fazemos-content-2">
  <img src="images/comofazemos-content2.png" />
  </div>

  <div class="como-fazemos-content-3"> 
  <img src="images/comofazemos-content3.png" />
  <br />
<div class="como-fazemos-mini-title">INOVAÇÃO</div><br />
Descobrir o diferente explorando novas ideias.
  </div>

  <div class="como-fazemos-content-4"> 
  <img src="images/comofazemos-content4.png" />
  </div>

  <div class="como-fazemos-content-5"> 
  <img src="images/comofazemos-content5.png" />
  <br />
<div class="como-fazemos-mini-title">PESSOAS</div><br />

A ligação entre a nossa
criação e o seu negócio.
  </div>

</div>
</div>

<div class="row">
<div class="quem-somos">
  <a id="quem"></a>

  <h1 class="quem-somos-title">QUEM SOMOS?</h1>
  <h1 class="quem-somos-subtitle">VOCÊ COM CERTEZA JÁ OUVIU FALAR DAS FAMOSAS FÓRMULAS DE BHASKARA.</h1>

  <div class="quem-somos-content-1">
  <br />
<br />
A equação completa de segundo grau agora pode ter mais sentido do que nunca. Pelo menos foi assim para a gente. Aprendemos a enxergar resultados claros e perfeitamente desenhados em cada problemática que analisávamos, e assim encontramos o X.
<br />
<br />
Dizem por aí que números não se comunicam. Já nós preferimos pensar que eles ajudam na evolução de qualquer negócio e podem se comunicar muito mais do que imaginamos, inclusive nos inspirando criativamente.
  </div>

  <div class="quem-somos-content-2">
  <img src="images/quemsomos1.png" />
  </div>

<br />
<br />
<br />
<br />
<br />

<hr>

<div class="quem-somos-content-3">
<img src="images/quemsomos3.png" />
</div>

<div class="quem-somos-content-4">
<br />
<br />
<img src="images/quemsomos2.png" />
</div>

</div>
</div>

<div class="row">
<div class="a-equipe">
  <a id="equipe"></a>
 <h1 class="a-equipe-title">A EQUIPE</h1>

<div class="a-equipe-content-1">

<img src="images/equipe-felipe.png" />

<h1 class="a-equipe-felipe">FELIPE SOLHA</h1>

<h1 class="a-equipe-signos">canceriano</h1><br />
Formado em design gráfico pela FAAP,
corinthiano (vai timão), não troca o
futebolzinho de terça-feira por nada,
e viciado em ar-condicionado.
</div>

<div class="a-equipe-content-2">

<img src="images/equipe-marcela.png" />

<h1 class="a-equipe-marcela">MARCELA OLIVEIRA</h1>

<h1 class="a-equipe-signos">aquariana</h1><br />


Formada em RP pela FAPCOM, a vida
fica mais completa numa roda de
amigos (e cerveja gelada) e acredita
que existe sim amor em SP.
</div>

<div class="a-equipe-content-3">

<img src="images/equipe-ticiane.png" />

<h1 class="a-equipe-ticiane">TICIANE PASCHOAL</h1>

<h1 class="a-equipe-signos">geminiana</h1><br />


Formada em design gráfico pelo
SENAC, fotógrafa nas horas vagas e
ainda dá pinta de modelete - e redatora
-, em seu blog Editando Moda.
</div>

</div>
</div>

<div class="row">
<div class="o-contato">
  <a id="contato"></a>
  CONTATO<br />
<br />

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis. 
<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>
</div>


</body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */


html,body {
    height:auto;    
    margin:0;
    padding:0;
    border:0;
    }

div {
    margin:0;
    border:0;
    }

.login {
  display: table-cell;
}


div.logo {
    margin: 0;
    padding-left: 30px;
    padding-top: 5px;
}



    hr {
   display: block;
   position: relative;
   padding: 0;
   margin: 20px auto;
   height: 0;
   width: 50%;
   max-height: 0;
   font-size: 1px;
   line-height: 0;
   clear: both;
   border: none;
   border-top: 2px solid #FFF;
   border-bottom: 1px solid #FFF;
}

.menu-fundo {
    background: #fff repeat-x 0 0;
    left: 0;
    top: 0;
    z-index: 9999;
    position:fixed;
    }

.f-menu {
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    } /* isso vai fazer o menu ficar fixo no topo */

.menu {
height: 100px;
left: 0;
top: 0;
z-index: 9999;
background: #fff repeat-x 0 0;
position:fixed;
width:100%;
}

.menu ul {
    list-style: none;
    font-family: 'Source Sans Pro', sans-serif;
    font-size:17px;
    font-weight:bold;
    position: fixed;
    top: 0;
    right: 0;
    padding: 22px 0;
    }

.menu ul li {
float: right;
padding-right:30px;
padding-top:0px;
}

.menu ul li:first-child {
    padding-left: 0;
    }

.menu ul li a {
    display: table-cell;
    vertical-align: middle;
    color:#000;
    text-decoration:none;
    border-top:3px solid #999;
    }

.menu ul li a:hover {
    color: #6D6D6D;
    border-top:3px solid #EA0000;
    }


.row, .o-que-fazemos, .como-fazemos, .quem-somos, .a-equipe, .o-contato {
    display: block;
    float: left;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.o-que-fazemos {
    background-image: url('images/oqfazemosFUNDO.png');
    font-family: 'Source Sans Pro', sans-serif;
    background-repeat: repeat-x repeat-y;
    height:auto;
    font-size:28px;
    padding: 50px;
    float:left;
    overflow: hidden;
    }

.o-que-fazemos-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:80px;
    text-align:center;
    color:#ffc709;
    font-weight:900;
    letter-spacing: 2px;
    }

.o-que-fazemos-subtitle {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:80px;
    text-align:center;
    color:#FFF;
    font-weight:900;
    letter-spacing: 2px;
    margin-top:-20px;
    }


.o-que-fazemos-content-1 {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:20px;
    color:#FFF;
    float:left;
    margin-left:14%;
    width: 29%;
    }


.o-que-fazemos-content-2 {  
    width: 43%;
    float: left;
    text-align: right;
    }

.como-fazemos {
    background-image: url('images/comofazemosFUNDO.png');
    font-family: 'Source Sans Pro', sans-serif;
    background-repeat: repeat-x repeat-y;
    height:auto;
    font-size:28px;
    padding: 50px;
    float:left;
    overflow: hidden;
    }

.como-fazemos-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:80px;
    text-align:center;
    color:#FFF;
    font-weight:900;
    letter-spacing: 2px;
    }



.como-fazemos-content-1 {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:24px;
    color:#FFF;
    float:left;
    width: 20%;
    text-align:center;
    margin-left:15%;
    }


.como-fazemos-content-2 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:24px;
    color:#FFF;  
    float: left;
    width:5%;
    text-align:center;
    }

.como-fazemos-content-3 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:24px;
    color:#FFF;  
    width: 20%;
    float: left;
    text-align:center;
    }
.como-fazemos-content-4 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:24px;
    color:#FFF;  
    float: left;
    width:5%;
    text-align:center;
    }

.como-fazemos-content-5 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:24px;
    color:#FFF;  
    width: 20%;
    float: left;
    text-align:center;
    }

    .como-fazemos-mini-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:26px;
    color:#414042;
    font-weight:bold;  
    text-align:center;
    }

.quem-somos {
    background-image: url('images/quemsomosFUNDO.png');
    font-family: 'Source Sans Pro', sans-serif;
    background-repeat: repeat-x repeat-y;
    height:auto;
    font-size:28px;
    padding: 50px;
    float:left;
    overflow: hidden;
    }


.quem-somos-content-1 {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:20px;
    color:#414042;
    float:left;
    margin-left:10%;
    width: 40%;
    text-align: left;
    }


.quem-somos-content-2 { 
    width: 43%;
    float: left;
    text-align: right;
    }

.quem-somos-content-3 {  
    float:left;

    width: 50%;
    text-align: center;
    }


.quem-somos-content-4 { 
    width: 40%;
    float: left;
    text-align: center;
    }


.quem-somos-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:80px;
    text-align:center;
    color:#fff;
    font-weight:900;
    letter-spacing: 2px;
    }

.quem-somos-subtitle {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:22px;
    text-align:center;
    color:#414042;
    font-weight:900;
    letter-spacing: 2px;
    }


.a-equipe {
    background-image: url('images/EQUIPE-FUNDO.png');
    font-family: 'Source Sans Pro', sans-serif;
    background-repeat: repeat-x repeat-y;
    height:auto;
    font-size:28px;
    padding: 50px;
    }


.a-equipe-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:80px;
    text-align:center;
    color:#414042;
    font-weight:900;
    letter-spacing: 2px;
    }

.a-equipe-content-1 {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:16px;
    color:#828487;
    float:left;
    width: 22%;
    text-align:left;
    margin-left:11%;
    }

.a-equipe-content-2 {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:16px;
    color:#828487;
    float:left;
    width: 22%;
    margin-left:6%;
    text-align:left;
    }

.a-equipe-content-3 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:16px;
    color:#828487;
    float:left;
    width: 22%;
    margin-left:6%;
    text-align:left;
    }   

.a-equipe-felipe {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:23px;
    color:#5bc7d8;
    text-align:left;
    }

.a-equipe-marcela {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:23px;
    color:#ffc709;
    text-align:left;
    }

.a-equipe-ticiane {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:23px;
    color:#f0545b;
    text-align:left;
    }

.a-equipe-signos {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:16px;
    color:#41424b;
    text-align:left;
    margin-top:-19px;
    }

.o-contato {
    background-image: url('images/contato-FUNDO.png');
    font-family: 'Source Sans Pro', sans-serif;
    background-repeat: repeat-x repeat-y;
    height:auto;
    font-size:28px;
    padding: 50px;
    }

.banner {
    position: relative;
    overflow: auto;
    }

.banner li {
    list-style: none;
    }

.banner ul li {
    float: left;
    }

Answer 1

不使用换行符（ ），而是将代码包装在标记中，并根据需要添加CSS规则。我尝试删除网络检查器中的换行符，一切正常。

修改为清楚起见，换行符最适合用于维护段落结构。所以，如果你想要一个格式化为

的段落
aaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa
AAAAAAAAAAAAAAAAAAA
aaaaaaaaaaaaaaaaaaaaaa

换行会很棒。

而且，为了进一步明确，我所指的 标签围绕着没有排队的标题。

Answer 2

图像后面有 个标签，当包含的元素太窄时，图像和中断标记之间的线会断开，并且中断会在标题上方留出空格。

只需删除 标记，然后根据需要制作图像块元素。

相同的CSS类，不同的行为。发生了什么？

2 个答案: