Question

我目前有以下内容：

HTML

<body>

<h1>Web Services</h1>


<div id="wrap">

    <ul id="nav">
        <li><a href="welcome.jsp">Home</a></li>
        <li><a href="importMarketData.jsp">Service A</a></li>
        <li><a href="downloadFile.jsp">Service B</a></li>
        <li><a href="summaryMarket.jsp">Service C</a></li>
        <li><a href="currencyMarketData.jsp">Service D</a></li>      
   </ul> 
</div>

<h2>Overview</h2>

<div class="textParagraph">
    <p>
        The Web Services listed on this site allow users to retrieve, alter and summarize information contained with a "Market Data File". 
        A Market Data File contains data about financial instruments. 
    </p>
    <p>
        Please click on the links above for more information about our services and have a trial run.
    </p>
</div>

CSS

@CHARSET "ISO-8859-1";

body {
font-family: Verdana, Arial, sans-serif;    
width: 900px;
margin-left: auto;
margin-right: auto;

}


/* Begin Navigation Bar Styling */
#nav {

  float: left;
  margin: 0 0 3em 0;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ccc; 
  border-top: 1px solid #ccc;
  border-left:1px solid #ccc; }
  #nav li {float: left;}
  #nav li a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #069;
  border-right: 1px solid #ccc; }
  #nav li a:hover {
  color: #c00;
  background-color: #fff; }
  /* End navigation bar styling. */

  /* This is just styling for this specific page. */
  #wrap {
  margin-left: auto;
  margin-right: auto;
  background-color: #fff; }   


h1 {

text-align:center; 

}

h2 {

text-align:center;

}

这就是目前的情况。

enter image description here

导航栏也应在中心对齐。我从某个站点获得了导航栏的代码。

Overview应位于下一行，并以WebServices为中心。

我怎样才能实现这一目标？我不明白为什么<div>和<h2>出现在同一行..

Answer 1

将#nav更改为此类内容。

#nav {
  margin: 0 0 3em 0;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ccc; 
  border-top: 1px solid #ccc;
  border-left:1px solid #ccc; 
}

Answer 2

#wrap需要一些帮助才能知道它必须包含漂浮的孩子;您可以通过添加overflow: auto;：

轻松完成此操作

#wrap {
    margin-left: auto;
    margin-right: auto;
    background-color: #fff; 
    overflow: auto;
    zoom: 1;
}

zoom是特定于IE的规则，有助于在旧版本中触发hasLayout。

Answer 3

因为你有#nav { float: left }，所以你需要在它之后添加一个清除。您可以在h2上执行.clear的实用程序类。

.clear {
     clear: both;
 }

或者，只需将clear: both添加到h2元素。

Answer 4

您的导航栏已浮动;您需要将clear: left;应用于h2元素以强制它显示在导航栏下方。如果您希望所有内容都居中，请移除float: left并将text-align: center添加到您的代码中。

Answer 5

查看演示

#wrap {
margin-left: auto;
margin-right: auto;
background-color: #fff;
float: left;
border: 1px solid #f00;
width: 100%;
}

Demo

Answer 6

将此添加到您的包裹

class="clearfix"

然后在css中添加此

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0px;
    visibility: hidden;
}

你已经在你的包裹中浮动元素，从而使你的包裹高度为零，你需要clearfix根据浮动元素调整包裹高度

Answer 7

将wrap css更改为：

#wrap {
  display:inline-block;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
     }

http://fiddle.jshell.net/utfp20sp/

Div和H2出现在同一行

7 个答案: