Question

请参阅下面的代码和这个小提琴：http://jsfiddle.net/u42mnobz/

我的div似乎没有正确嵌套。我试图更改部分中包含的div的边距：sell_section，service_types_questions等。但是，此div中的div（例如，，box1 ）不反映更改时的我尝试编辑边距，填充等。

想法？

<head>
<title>Lavu Explore</title>
<link rel="stylesheet" type="text/css" href="stylesheet1.css">
</head>
<body>
<div id="header">
  <div id="sub_nav">
    <ul>
      <li>Overview</li>
      <li>Payments</li>
      <li>Hardware</li>
      <li>Testimonials</li>
      <li>Contact</li>
    </ul>
  </div>
</div>
<div id="sell_section">
  <h2>Sell, Manage, & Market in one easy system</h2>
  <hr class="hr_1">
    <div class="box1">
      <img id ="terminal_img" src="http://i.imgur.com/D5T6lY1.png">
    </div>
    <div class="box1">
      <p style="text-align:left">Choosing a new Point of Sale (POS) is an opportunity. Lavu is not just accepting payments - Lavu is business management on the iPad. Upgrade your business with the Cloud POS system that was developed specifically for the restaurant / hospitality industry. Lavu has the tools you need to improve efficiency and the bottom line. Love your business.
      <ul>
        <li>CLOUD DATA ACCESS</li>
        <li>TOUCHSCREEN INTERFACE</li>
        <li>WIRELESS COMMUNICATION</li>
      </ul>
  </div>
</div>
<hr class="hr_2">
<div id="service_types_section">
  <h4>Best restaurant point of sale for any service type</h4>
  <p>Quick serve, bars, nightclubs, food trucks, coffee shops, pizzerias, and more...</p>
  <div class="container">
    <div class="box b1"><img id="table_layout" src="http://i.imgur.com/UvA8BRX.png"><p>TABLE LAYOUT</p></div>
    <div class="box b2"><img src="http://i.imgur.com/T4Ra30G.png"><p>OPEN TAB LAYOUT</p></div>
    <div class="box b3"><img src="http://i.imgur.com/kWTOzJl.png"><p>QUICK SERVE</p></div>  
  </div>
</div> 
<hr class="hr_2">
<div id="fresh_tech_section">
  <div class="box1">
    <h4>Fresh Technology</h4>
    <hr class=hr_1 style="float:left; width:70%">
      <br>
    <p>Taking advantage of Apple's reliable technologies, Lavu POS operates on iPads, iPods, and iPhones. The clean, intuitive interface is easy to learn, yet includes the specific industry features that ensure that restaurant operations run smoothly every shift</p></td>
  </div>
  <div class="box1">
    <img id="fresh_tech_img" src="http://i.imgur.com/mC7XsaX.png">
  </div>
</div>
<hr class="hr_2">
<div id="Front_of_House_solutions">
  <div class="box1">
    <img src="http://i.imgur.com/HrhfIL1.png">
  </div>
  <div class="box1" style="">
    <h4>Front of House Solutions</h4>
    <hr class="hr_1" style="float:left" >
    <br>
      <p style="margin:1%">Split checks</p>
      <p style="margin:1%">Scheduled discounts</p>
      <p style="margin:1%">Multiple payment options</p>
      <p style="margin:1%">Order transfers</p>
      <p style="margin:1%">Menu item modifiers</p>
      <p style="margin:1%">Photos & descriptors</p>
  </div>   
</div>
<hr class="hr_2">
<div id="Back_of_House_section">
  <h4>Back of House Customization</h4>
  <hr class="hr_1">
  <img src="http://i.imgur.com/UVtKujY.png">
</div>
<div id="Payments_section">
  <h4>Payments</h4>
  <p>Lavu makes accepting payments simple. With dozens of integrated processing providers we ensure your business is positioned to get the best possible rates at every stage of your business</p>
</div>

body {
margin: auto;
position: relative;
overflow: auto;
padding: 0 5%;
max-width: 990px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

h2 {
text-align: center;
font-family: DIN;
font-size: 40px;
color: #8b8b8b;
text-align: center;
width: 100%;
font-weight: normal;
}

h4 {
font-family: din;
font-weight: normal;
font-size: 30px;
color: #8b8b8b;
padding: 2% 0;
margin: 0;
}

p {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #8b8b8b;
font-size: 16px;
line-height: 150%;
}

.hr_1 {
position: relative;
padding: 0;
margin: 2% auto;
height: 0;
width: 400px;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #aecd37;
border-bottom: 1px solid #aecd37;
}

.hr_2 {
display: block;
position: relative;
padding: 0;
margin: 2% 0;
width: 800px;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #f4f4f4;
border-bottom: 1px solid #f4f4f4;
}

.box1 {
width: 50%;
min-width: 50%;
position: relative;
min-height: 1px;
}

#terminal_img {
padding: 5%
}
@media (min-width: 830px) {
.box1 {
float: left;
 }
}
@media (max-width: 830px) {
.box1 {
width: 100%;
 }
}

.container {
padding-top: 2%;
width: 100%;
overflow: hidden;
text-align: ;
}
.box {
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
text-align: ;
}

#service_types_section {
text-align: center;
}

#fresh_tech_section {
margin: 2% 0;
}

#Front_of_House_solutions {
margin: 2% 0;
}

#Back_of_House_section {
text-align: center;
margin: 2% 0;
}

ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 30px;
font-family: din;
font-weight: bold;
color: #8b8b8b;

}

Answer 1

与您的其他问题非常相似 - https://stackoverflow.com/a/27410448/1592915 - 我认为您会将<hr>标签混淆为不属于他人的标签。它们提供了这样的水平：

它们不会包装任何东西，所以你想要设置实际包装div的类的样式（例如<div id="service_types_section">...将被称为{{1在css）。

此外，您可以通过提高特异性来解决#service_types_section { ... }在不同div中的问题，例如

.box1

这是获得familiarized with specificity的好文章。

Answer 2

您的HTML格式不正确。

段落标记<p style="text-align:left">Choosing a new Point of Sale没有结束标记
段落标记<p>Taking advantage最后有</td>
您的<img>个标签都没有关闭'/'
添加结束<body>和<html>代码

首先尝试解决此问题，看看它是否能解决您的一些问题。

我的div似乎没有正确嵌套

2 个答案: