Избавление от дополнительной ширины?

Как показано на этом рисунке, я получаю большую дополнительную ширину, которая расширяется до упора вправо. Я хочу, чтобы только слова были окружены этим голубым цветом фона. Любая помощь будет очень высоко ценится!Избавление от дополнительной ширины?

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

источник

2015-02-11 zaynv

Ваш 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; 
}

источник

2015-02-11 15:21:04 Rasel

Если ограничить ширину секции, вы можете быть в состоянии сделать это.

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

удачи.

источник

2015-02-11 15:04:28 user3138997

Вы также можете попробовать установить раздел как display: inline-block. Он по-прежнему будет действовать как элемент уровня блока несколькими способами, но не будет продолжен.

источник

2015-02-11 15:06:43 Jordan

Избавление от дополнительной ширины?

ответ

Смежные вопросы