Question

我的<h2>标题之一出现问题。我对所有这些使用单一样式但是有一个特定的标题无法正常工作。 [截图附件]

以下是我的完整源代码：

<!DOCTYPE HTML>
<html>
<head>
 <title>Title</title>

 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="description" content="Description">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

 <meta name="geo.placename" content="United States" />
 <meta name="geo.position" content="x;x" />
 <meta name="geo.region" content="usa" />
 <meta name="ICBM" content="x,x" />

 <meta property="og:title" content="Title"/>
 <meta property="og:type" content="website"/>
 <meta property="og:image" content="http://img.example.com/profile/display/mohawkSideView.jpg"/>
 <meta property="og:url" content="http://profile.example.com"/>
 <meta property="og:site_name" content="Title"/>
 <meta property="og:description" content="Description"/>

 <meta name="twitter:card" content="summary">
 <meta name="twitter:url" content="http://profile.example.com">
 <meta name="twitter:title" content="Title">
 <meta name="twitter:description" content="Description">
 <meta name="twitter:image" content="http://img.example.com/profile/display/mohawkSideView.jpg">

 <link rel="shortcut icon" href="http://img.example.com/profile/display/mohawkSideView.jpg" />
 <link rel="apple-touch-icon" href="http://img.example.com/profile/display/mohawkSideView.jpg"/>
 <link rel="icon" href="http://img.example.com/profile/display/mohawkSideView.jpg"/>

 <link rel="stylesheet" href="http://profile.example.com/css/universal.css">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="http://profile.examle.com/js/ezslide.js" type="text/javascript"></script>
 <script src="http://profile.example.com/js/equalHeight.js" type="text/javascript"></script>
</head>
<body>
<div id="profile-container">
 <div id="profile-left" class="profile-column">
    <div id="profile-image">
   <img src="http://img.example.com/profile/display/mohawkSideView.jpg" alt="Jesse Toxik">
  </div>
  <div id="profile-info">
   <ul>
    <li><span>&#0046;</span> <b>Name:</b> Name</li>
    <li><span>&#0083;</span> <b>Relationship:</b> X</li>
    <li><span>&#0059;</span> <b>Birthday:</b> 02/05/1991</li>
    <li><span>&#0058;</span> <b>Age:</b> 25</li>
    <li><span>&#0117;</span> <b>Location:</b> City/State</li>
    <li><span>&#0116;</span> <b>Zodiac:</b> Aquarius</li>
    <li><span>&#094;</span> <b>Occupation:</b> PEVO</li>
    <li><span>&#0114;</span> <b>Xbox:</b> Screen Name</li>
   </ul>
  </div> </div>
 <div id="profile-right" class="profile-column">
    <h2>Wednesday - Jun 15, 2016</h2>
  <h1><b>[</b> Username <b>]</b></h1>
  <h2>Welcome To My Domain</h2>
  <div id="profile-status" class="profile-section">
   <i>&#0063;</i> <b>Status:</b>
   <p>
Status not available.
</p>  </div>
  <div id="profile-quote" class="profile-section">
   <i>&#0063;</i> <b>Favorite Quotes:</b> 
   <ul id="profile-quote-rotator">
 <li>One Persons Craziness Is Another Mans Reality - <u>Tim Burton</u></li>
 <li>Every man is guilty of all the good he did not do. - <u>Voltaire</u></li>
 <li>Thou shall not bow down before any graven image. - <u>Pinhead (Hellraiser II)</u></li>
 <li>The scariest monsters are the ones that lurk within our souls. - <u>Edgar Allen Poe</u></li>
 <li>If you have a quality, be proud of it. Let it define you, whatever it is. - <u>Pinhead (Hellraiser)</u></li>
</ul>   </div>
   <div id="profile-about" class="profile-section">
    <h2>Who I Am</h2>
    <p>
<a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p>   </div>
   <div id="profile-likes" class="profile-section">
    <h2>Things I Like</h2>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p>   </div>
   <div id="profile-dislikes" class="profile-section">
    <h2>Things I Do Not Like</h2>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p>   </div>
   <div id="profile-music" class="profile-section">
    <h2>Music That Tickles My Fancy</h2>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p>   </div> </div>
 <div id="profile-gallery">
  <div id="profile-gallery-images">
 <h2>Eye Candy</h2>
 <a href="img.jpg">
  <img src="img.jpg" alt="ALT TEXT">
 </a>
 <a href="#">
  <img src="img.jpg" alt="ALT TEXT">
 </a>
 <a href="#">
  <img src="img.jpg" alt="ALT TEXT">
 </a>
 <a href="#">
  <img src="img.jpg" alt="ALT TEXT">
 </a>
 <a href="#">
  <img src="img.jpg" alt="ALT TEXT">
 </a>
 <a href="#">
  <img src="img.jpg" alt="ALT TEXT">
 </a>
 <a href="#">
  <img src="img.jpg" alt="ALT TEXT">
 </a>
 <a href="#">
  <img src="img.jpg" alt="ALT TEXT">
 </a>
</div> </div>
 <div id="profile-footer">
  <h2>&copy; 2015</h2> </div>
</div>

我的CSS [包含PHP以便于编辑]：

    header("Content-type: text/css; charset: UTF-8");
    header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
    header("Cache-Control: post-check=0, pre-check=0", false);
    header("Pragma: no-cache");

   function hex2rgb($hex) {
   $hex = str_replace("#", "", $hex);

   if(strlen($hex) == 3) {
      $r = hexdec(substr($hex,0,1).substr($hex,0,1));
      $g = hexdec(substr($hex,1,1).substr($hex,1,1));
      $b = hexdec(substr($hex,2,1).substr($hex,2,1));
   } else {
      $r = hexdec(substr($hex,0,2));
      $g = hexdec(substr($hex,2,2));
      $b = hexdec(substr($hex,4,2));
   }
   $rgb = array($r, $g, $b);
   return implode(",", $rgb); // returns the rgb values separated by commas
   }
    date_default_timezone_set('America/New_York');
    if( date( 'w' ) == 0 ) { // Sunday - Orange
     $mainColorHex = "#ff6400";
    }
    if( date( 'w' ) == 1 ) { // Monday - Red
     $mainColorHex = "#ff0000";
    }
    if( date( 'w' ) == 2 ) { // Tuesday - Lime Green
     $mainColorHex = "#32cd32";
    }
    if( date( 'w' ) == 3 ) { // Wednesday - Neon Blue
     $mainColorHex = "#67c8ff";
    }
    if( date( 'w' ) == 4 ) { 
     $mainColorHex = "#a020f0"; // Thursday - Purple
    }
    if( date( 'w' ) == 5 ) {  // Friday - Yellow
     $mainColorHex = "#ffff00"; 
    }
    if( date( 'w' ) == 6 ) {  // Saturday - Light Gray
     $mainColorHex = "#787878";
    }
    if( date('z') + 1 == 304 ) { // Halloween - Halloween Orange
     $mainColorHex = "#ff9100";
    }
    $mainColorRGB = hex2rgb($mainColorHex);

?>
@import url('http://fonts.example.com/custom.css');
* {
   margin: 0;
   padding: 0;
   text-decoration: none;
   list-style: none;
   font-style: normal;
   font-family: Helvetica;
}
body {
   background-color: #212121;
   background-image: url('');
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   color: #fff;
   text-align: center;
}
h1, h2, h3, h4, h5, h6 {
   font-family: Orbitron;
   margin-bottom: 5px;
}
h1, h2 {
   text-align: center;
}
h1 {
   padding: 10px;
   padding-top: 15px;
   font-size: 45px;
   line-height: 50px;
   font-variant: small-caps;
}
h2 {
  text-align: center;
  margin: 0 auto;
  text-transform: uppercase;
  display: table;
  white-space: nowrap;
  color: <?php echo $mainColorHex; ?>;
  font-size: 16pt;
}
h2:before,
h2:after {
  border-top: 2px solid #565656;
  content: '';
  display: table-cell;
  position: relative;
  top: 0.5em;
  width: 45%;
}
h2:before {
  right: 1.5%;
}
h2:after {
  left: 1.5%;
}
i {
   font-family: WebSymbolsLiga;
}
b {
   color: <?php echo $mainColorHex; ?>;
}
u {
   color: <?php echo $mainColorHex; ?>;
   font-style: normal!important;
   font-weight: bold;
}
p {
   text-indent: 20px;
   margin-bottom: 10px;
}
a:link, a:visited {
   color: <?php echo $mainColorHex; ?>;
}
a:hover {
   text-decoration: underline;
}
#profile-container {
   width: 1040px;
   margin: 0 auto;
   padding: 20px;
   display: block;
   display: inline-block;
   text-align: left;
   background: #000;
}
#profile-left {
   width: 300px;
   float: left;
   border-right: 1px solid #565656;
}
#profile-right {
   width: 689px;
   float: right;
   padding-left: 20px;
   padding-right: 20px;
}
#profile-image {
   text-align: center;
   margin-bottom: 5px;
}
#profile-image img {
   width: 244px;
   height: 244px;
   border: 3px solid #565656;
}
#profile-info {
   font-family: Helvetica;
   width: 250px;
   margin: 0 auto;
}
#profile-info > ul > li {
   border: 1px solid <?php echo $mainColorHex; ?>;
   margin-bottom: 10px;
   padding: 5px;
   border-radius: 10px;
   text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
   background: -moz-linear-gradient(top, rgba(<?php echo $mainColorRGB; ?>,1) 0%, rgba(255,191,150,0) 59%, rgba(255,255,255,0) 100%);
   background: -webkit-linear-gradient(top, rgba(<?php echo $mainColorRGB; ?>,1) 0%,rgba(255,191,150,0) 59%,rgba(255,255,255,0) 100%);
   background: linear-gradient(to bottom, rgba(<?php echo $mainColorRGB; ?>,1) 0%,rgba(255,191,150,0) 59%,rgba(255,255,255,0) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='<?php echo $mainColorHex; ?>', endColorstr='#00ffffff',GradientType=0 );
}
#profile-info > ul > li > span {
   font-family: WebSymbolsLiga;
}
#profile-info > ul > li > i {
   color: <?php echo $mainColorHex; ?>;
   font-weight: bold;
}
.profile-section {
   margin-bottom: 10px;
}
#profile-quote-rotator {
   height: 18px;
   line-height: 18px;
   font-size: 16px;
}
#profile-quote-rotator > li {
   text-indent: 30px;
   font-style: Italic;
   text-transform: capitalize;
}
#profile-gallery {
   clear: both;
   clear: all;
   text-align: center;
}
#profile-gallery-images > a > img {
   width: 200px;
   height: 200px;
   margin: 10px;
}
#profile-footer {
   clear: both;
   clear: all;
   text-align: center;
}

截图：

版权标题是＆＃34; eye candy＆＃34;应该出现一个。每边都有间隙。我不确定为什么他们不一样。

我包含了我的整个结构代码，希望这更容易解决。

提前谢谢。

Answer 1

专门为h2添加宽度似乎可以解决您的问题：

h2 {
  text-align: center;
  margin: 0 auto;
  text-transform: uppercase;
  display: table;
  white-space: nowrap;
  color: <?php echo $mainColorHex; ?>;
  font-size: 16pt;

  /* Added */
  width:75%;
}

但是，

不一定是百分比值。

标题拉伸太远

1 个答案: