html - header 拉伸(stretch)太远-6ren

html - header 拉伸(stretch)太远

转载作者：太空宇宙更新时间：2023-11-04 10:07:51

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

这是我的全部源代码:

<!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;
}

和截图:

版权 header 是“养眼” header 的显示方式。每边都有一个缺口。我不确定为什么它们不一样。

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

提前谢谢你。

最佳答案

专门为 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%;
}

但不一定是百分比值。

关于html - header 拉伸(stretch)太远，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37844439/

文章推荐： python - python中for循环的优化

文章推荐： java - Spring Boot通过MessageConverters序列化Instant

文章推荐： java - 使用其他版本的 JDBC 驱动程序

文章推荐： html - 为什么图像(在 CSS 中)没有出现在我的 HTML 中？

普罗米修斯样本太旧或离 future 太远
prometheus 和 node exporter 都使用 chrony 来同步时间。 [root@MiWiFi-R3-srv node_exporter-0.18.1.linux-amd64]#
css - jQuery 移动按钮拉伸(stretch)太远
由于某种原因，当我调整浏览器窗口的大小时，文本字段下方的按钮似乎变得比文本框更宽。有什么想法吗？ SCRN: HTML : Title
html - header 拉伸(stretch)太远
我的一个有问题标题。我对所有这些都使用单一样式，但有一个特定的 header 无法正常工作。 [附截图] 这是我的全部源代码: Title

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - header 拉伸(stretch)太远