顶侧导航栏中的自动边距？

时间：2014-03-12 05:11:24

标签： html css

我注意到每次我尝试制作一个导航栏时，我的左上边距约为8px就在那里..我不知道它来自哪里，因为我的css文件很小而且我没有那个任何代码。我开始认为它是某种类型的标准，也许我做错了。我该如何克服这个问题？我在工具栏的左侧和顶部添加了一个-8px的边距，现在它与浏览器齐平;但是，如果用户水平滚动到右侧，则现在存在空白区域。

Take a look at the margins on the top nav bar

CSS 

body {
}

.navbar-container {
width: 100%;
background-color: #252122;
/*margin-left:-8px;
margin-top:-8px;*/
}

    .navbar-container table {
    width: auto;
    }


.classifieds-container {
overflow: hidden;
z-index: -1;
top: 40px;
left: 0;
right: 0;
display: block;
width: 960px;
padding-bottom: 25px;
background: #fff;
box-shadow: 1px 0 7px;
font: 11px "Arial",sans-serif;
color: #000;
/*line-height: 59px;*/
}

    .classifieds-container label {
    color: blue;
    }

        .classifieds-container label:hover {
        color: red;
        text-decoration: underline;
        }

    .classifieds-container table {
    width: 960px;
    }

    .classifieds-container .col {
    float: left;
    margin-left: 15px;
    }

.col-one {
margin-top: 60px;
float: left;
margin-left: 200px;
max-width: 175px;
text-wrap: normal;
}

    .col-one h3 {
    text-align: center;
    }

.row-splitter {
border-bottom: solid;
border-width: 1px;
border-color: gray;
margin-top: 5px;
margin-bottom: 5px;
}

.classified-link-descriptor {
color: gray;
text-decoration: none;
font: 11px "Arial",sans-serif;
margin-bottom: 5px;
display: block;
}

nav {
display: block;
}

.logo-header {
height: 35px;
width: auto;
float: right;
}

HTML 

<body>
 <nav>
    <div id="Navigation">
        <div class="navbar-container">
            <table>
                <tbody>
                    <tr>
                        <td colspan="2">

                            <img class="logo-header" src="~/Content/logo_black_background.png" />

                        </td>

                        <td colspan="6">
                            <div>
                                @(Html.Kendo().Menu()
  .Name("Menu")
  .Items(items =>
  {
      items.Add()
          .Text("Home");
      items.Add()
          .Text("Classifieds")
          .Content(@<text>
                                <div class="classifieds-container">
                                    <div id="col1" class="col">
                                        <div id="col1-row1">
                                            <h2>Auto</h2>
                                        </div>
                                        <div class="row-splitter">
                                        </div>
                                        <div>
                                            @*@Html.ActionLink("Custom Builds", "Index", "ResultsList", new { TypeOfPart = gcaMusicExchange.StaticData.ItemType.Build }, new { @class = "classified-link" })*@
                                            <label id="Custom-Builds">Custom Builds</label>
                                            <div class="classified-link-descriptor">Modified vehicles ready to drive</div>
                                            @*@Html.ActionLink("Shells", "Index", "ResultsList", new { TypeOfPart = gcaMusicExchange.StaticData.ItemType.Shell }, new { @class = "classified-link" })*@
                                            <label id="Shells">Shells</label>
                                            <div class="classified-link-descriptor">Non-running vehicles for parts</div>
                                            @*@Html.ActionLink("Stockers", "Index", "ResultsList", new { TypeOfPart = gcaMusicExchange.StaticData.ItemType.Stock }, new { @class = "classified-link" })*@
                                            <label id="Stockers">Stockers</label>
                                            <div class="classified-link-descriptor">Stock vehicles ready to drive</div>
                                            @* @Html.ActionLink("All Types", "Index", "ResultsList", new { TypeOfPart = gcaMusicExchange.StaticData.ItemType.AllTypesOfVehicles }, new { @class = "classified-link" })*@
                                            <label id="All-Types">All Types</label>
                                            <div class="classified-link-descriptor">Browse all types of vehicles in one search</div>
                                            @* @Html.ActionLink("By Year, Make, & Model", "VehiclesByMake", "Browse", null, new { @class = "classified-link" })*@
                                            <label id="YearMakeModel">By Year, Make, & Model</label>
                                            <div class="classified-link-descriptor">Search by specific year, make, and model</div>
                                        </div>
                                    </div>
                                    <div id="col2" class="col">
                                        <div id="col2-row1">
                                            <h2>Parts</h2>
                                        </div>
                                        <div class="row-splitter">
                                        </div>
                                        <div class="auto-links">
                                            <label id="Browse-all-parts">Browse all parts</label>
                                            @*@Html.ActionLink("Browse all parts", "Index", "ResultsList", null, new { @class = "classified-link" })*@
                                            <div class="classified-link-descriptor">Browse all parts with no discrimination!</div>
                                            <label id="Browse-by-vehicle-application">Browse by vehicle application</label>
                                            @*@Html.ActionLink("Browse by vehicle application", "PerformancePartsByVehicle", "Browse", null, new { @class = "classified-link" })*@
                                            <div class="classified-link-descriptor">By year, make, and model</div>
                                            @*@Html.ActionLink("Browse by part category", "PerformancePartsByCategory", "Browse", null, new { @class = "classified-link" })*@
                                            <label id="Browse-by-part-category">Browse by part category</label>
                                            <div class="classified-link-descriptor">By category (e.g. turbos, intake, engine builds, etc.)</div>
                                            @*@Html.ActionLink("Browse by part manufacturer", "PerformancePartsByManufacturerLetter", "Browse", null, new { @class = "classified-link" })*@
                                            <label id="Browse-by-part-manufacturer">Browse by part manufacturer</label>
                                            <div class="classified-link-descriptor">By manufacturer (e.g. Blouch, Stance, K&N, AEM, etc.)</div>
                                        </div>
                                    </div>
                                    <div id="col3" class="col">
                                        <div id="col3-row1">
                                            <h2>Wheels</h2>
                                        </div>
                                        <div class="row-splitter">
                                        </div>
                                        <div class="auto-links">
                                            @*@Html.ActionLink("Browse all wheels", "Index", "ResultsList", null, new { @class = "classified-link" })*@
                                            <label id="Browse-all-wheels">Browse all wheels</label>
                                            <div class="classified-link-descriptor">Browse all wheels with no discrimination!</div>
                                            @*@Html.ActionLink("Browse by size", "PerformancePartsByVehicle", "Browse", null, new { @class = "classified-link" })*@
                                            <label id="Browse-by-size">Browse by size</label>
                                            <div class="classified-link-descriptor">15", 18" x 11.5", 19" x 12.5" etc.</div>
                                            @* @Html.ActionLink("Browse by manufacturer", "PerformancePartsByCategory", "Browse", null, new { @class = "classified-link" })*@
                                            <label id="Browse-by-manufacturer">Browse by manufacturer</label>
                                            <div class="classified-link-descriptor">By manufacturer (e.g. Volk, Ray's, Work, Enkei, etc.)</div>
                                            @*@Html.ActionLink("Tires only", "PerformancePartsByCategory", "Browse", null, new { @class = "classified-link" })*@
                                            <label id="Tires-only">Tires only</label>
                                            <div class="classified-link-descriptor">Tires only! No rims here!</div>
                                        </div>
                                    </div>
                                </div>
                                </text>);
      items.Add()
          .Text("Search")
          .Items(children =>
              {
                  children.Add().Text("Showroom");
                  children.Add().Text("JDM gear heads");
              });

      items.Add().Text("Discussions");

      //if (WebSecurity.IsAuthenticated)
      //{
      //    items.Add().Text("Account");
      //}
      //else
      //{
      //    items.Add().Text("Sign In");
      //    items.Add().Text("Register");
      //}
  }
))
                            </div>
                        </td>

                        <td colspan="2"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</nav>
<div>
    @RenderBody()
</div>

4 个答案:

答案 0 :(得分：2)

在css中添加以下内容。

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

答案 1 :(得分：1)

默认情况下body获取8px保证金，因此您必须在margin:0

中提供body 
    body, html {
         margin:0;
    }

答案 2 :(得分：1)

正文在所有浏览器上都有默认边距

所以你应该

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

    }

或 

body, html {
             margin:0;
             padding: 0;
              overflow-x:hidden;
        }

或 

* {
margin: 0;
padding: 0;
}

答案 3 :(得分：1)

正如其他人已经说过的那样，在正文上设置 0 的margin就行了。我只想进一步解释。

margin: 8px声明是默认的用户代理（在本例中为Chrome浏览器）样式。没有什么能阻止其他浏览器实现另一个不同的默认样式值。最佳做法通常是使用重置CSS，将默认浏览器CSS重置为相同的值，以便您可以使用一致的基本样式开始开发。 NormalizeCSS是许多不错的选择之一。如果你查看它的内容，它有许多其他有用的声明：

/**
* Remove default margin.
*/

body {
  margin: 0;
}
相关问题
最新问题