Question

如图所示，我得到了很多额外的宽度，一直向右扩展。我只想要用蓝色背景颜色包围的单词。非常感谢任何帮助！

Tabs

我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Tabbed Layout</title>
  <link rel="stylesheet" href="tabs.css" type="text/css" media="screen" />
  <!--[if IE]>
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>

<body>
  <div class="tabContainer">
    <header>
      <h1>Educational Opportunities</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
      </ul>
    </nav>

    <!--
    =======================
     METHODOLOGIES SECTION
    =======================
    -->
    <section class="tab" id="tab1">
      <div class="content"><p>Section 1</p></div>
    </section>

    <!--
    ========================
     OTHER INTERNAL SECTION
    ========================
    -->
    <section class="tab" id="tab2">
      <div class="content"><p>Section 2</p></div>
    </section>

    <!--
    =======================
       EXTERNAL SECTION
    =======================
    -->
    <section class="tab" id="tab3">
      <div class="content"><p>Section 3</p></div>
    </section>
  </div> <!-- end of tabContainer div -->

  <script src="tabs.js"></script>
</body>

</html>

CSS：

/*=====================
* =   TABBED LAYOUT   =
* =====================
*/

html,body {
  margin:0;
  padding:0;
}

body {
  font:12px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  line-height:1.5em;
  color:#444;
  background:#fff;
}

h1, h2, h3, h4, h5, h6 {
  font-weight:normal;
  margin:0;
  line-height:1.1em;
  color:#000;
}

h1 {
  font-size:2em; margin-bottom:.5em;
}

h2 {
  font-size:1.75em; margin-bottom:.5142em; padding-top:.2em;
}

h3 {
  font-size:1.5em; margin-bottom:.7em; padding-top:.3em;
}

h4 {
  font-size:1.25em; margin-bottom:.6em;
}

h5,h6 {
  font-size:1em; margin-bottom:.5em; font-weight:bold;
}

a, a:visited {
  text-decoration:none;
  color:#06C;
}

a:hover {
  color:#999;
}

header, nav, article, section, footer, address  {
  display:block;
}

header {
  height:32px;
  overflow:hidden;
  background:#e1e1e1;
  padding:0 5px;
}

header h1 {
  line-height:32px;
  font-size:14px;
  text-shadow:#fff 0 1px 0;
  text-align:center;
}

nav {
  height:28px;
  overflow:hidden;
}

nav ul {
  margin:0;
  padding:0 5px;
  padding-left: 300px;
  width:100%;
  height:28px;
  box-shadow:inset 0 2px 2px #999;
  background:#bbb;
}

nav li {
  list-style:none;
  float:left;
  height:24px;
  line-height:24px;
  box-shadow:0 0 3px #888;
  margin:0 2px;
  width:200px;
  overflow:hidden;
  position:relative;
  background:#ccc;
}

nav li a, nav li a:visited, nav li a:hover {
  list-style:none;
  display:block;
  position:absolute;
  top:0;
  left:-2px;
  height:24px;
  line-height:24px;
  width:204px;
  text-align:center;
  color:#333;
  font-size:11px;
  text-shadow:#e8e8e8 0 1px 0;
  box-shadow:inset 0 1px 1px #888;
}

nav li.selected {
  background:#e1e1e1;
}

nav li.selected a {
  box-shadow:none;
}

nav li a:focus {outline:none;}

/*=====================
* =  SECTION STYLING  =
* =====================
*/
section {
  padding:20px;
  margin-left: 515px;
}

section .content {
  background: rgb(0, 122, 201);
}

Answer 1

你的css内容div有蓝色背景，<p>是孩子。您必须设置background此<p>并使用display:inline-block或使用<span>等内联元素代替<p>，您可以解决此问题。

<div class="content"><p class="myElem">Section 2</p></div>

<强> CSS

.myElem
{
background:blue;
display:inline-block;
}

Answer 2

如果限制部分的宽度，则可以执行此操作。

section {
  padding:20px;
  margin-left: 515px;
  width:100px;
}

祝你好运。

Answer 3

您也可以尝试将该部分设置为display: inline-block。它在某些方面仍然会像块级元素一样，但不会继续。

摆脱额外的宽度？

3 个答案: