个人中心
gpt4 book ai didi

html - 我的 div 似乎没有正确嵌套

转载 作者：行者123 更新时间：2023-11-28 17:25:07 25 4
gpt4 key购买 nike

请参阅下面的代码和这个 fiddle :http://jsfiddle.net/u42mnobz/

我的 div 似乎没有正确嵌套。我正在尝试更改以下部分中包含的 div 的边距:sell_section、service_types_questions 等。但是，此 div 中的 div(例如，box1)在我尝试时不会反射(reflect)更改编辑边距、填充等。

想法？

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

}

最佳答案

很像您的其他问题 - https://stackoverflow.com/a/27410448/1592915 - 我觉得你很困惑 <hr>他们不是的东西的标签。它们提供这样的水平:

它们不包装任何东西，因此您需要设置实际包装 div 的类的样式(例如 <div id="service_types_section">... 在 css 中将被寻址为 #service_types_section { ... })。

您也可以解决 .box1通过增加特异性在不同的 div 中，例如 

#service_types_section .box1 {
  ...
  some css rules
  ...
}

#fresh_tech_section .box1 {
  ...
  some other css rules
  ...
}

这里有一篇好文获取familiarized with specificity .

关于html - 我的 div 似乎没有正确嵌套，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27408344/

25 4 0
文章推荐： python - 带有 Selenium 的 Firefox 空白网络浏览器
文章推荐： javascript - 如何在 Javascript 正则表达式中匹配单个单词？
文章推荐： python - 如何在 Python Pandas Dataframe 中过滤混合数据类型对象中的字符串值
文章推荐： javascript - Js 子字符串不适用于 react 获取的字符串
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com