个人中心
gpt4 book ai didi

html - 边框导致 div 和段落对齐问题

转载 作者：行者123 更新时间：2023-11-28 05:54:11 26 4
gpt4 key购买 nike

对编码非常陌生，

主要是找border帮助和navbar分词的问题

HTML

<!DOCTYPE html>
<html>
  <link type="text/css" rel="stylesheet" href="stylesheet.css" />

  <head>
    <title>Rock Coast</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <header>
    <img src="http://s32.postimg.org/5bebu6mbl/Image_5_8_16_at_12_10_PM.jpgHome"></img>
    <div id="nav">
      <span><a href="#">Home</a></span>
      <span><a href="#"><button>Televeisions</button></a></span>
      <span><a href="#">Electronics</a></span>
      <span><a href="#">Services</a></span>
    </div>
  </header>

  </body>
  <div id="black">
    <h1> Something Occurs</h1>
    <p>Within this space is some text, or other graphical representations of things that this page displays</p>
  </div>
  <h1> Products </h1>
  <div id="parent">
    <span id="first"> <b>Product Name</b> </span>
    <span id="second"> <b>Product Name</b></span>
    <span id="third"> <b>Product Name</b> </span>
  </div>
  <div id="left">
    <pre>  
    This is a product
    description
    It takes up a few
    lines of space.
  <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

           Dimensions
    Product    might go
    Info:      here

               Another
    More       piece of
    Info:      data

  <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

     Buy it now!
    </pre>
  </div>
  <div id="center">
    <pre>  
    This is a product
    description
    It takes up a few
    lines of space.
  <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

           Dimensions
    Product    might go
    Info:      here

               Another
    More       piece of
    Info:      data

  <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

     Buy it now!
    </pre>
  </div>
  <div id="right">
    <pre>  
    This is a product
    description
    It takes up a few
    lines of space.
  <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

           Dimensions
    Product    might go
    Info:      here

               Another
    More       piece of
    Info:      data

  <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

     Buy it now!
    </pre>
  </div>
  </body>

</html>

CSS

header {
  height: 5.5em;
  background: gray;
  color: Black;
  text-align: justify;
  overflow: hidden;
}
img {
  float: left;
}
header {
  height: 5.5em;
  background: gray;
  color: Black;
  text-align: justify;
  overflow: hidden;
}
img {
  float: left;
}
#nav {
  width: 600px;
  text-align: center;
  margin-top: 2.5em;
}

#nav span a {
  color: black;
  text-decoration: none;
  padding: 10px;
  background:white;
}



h1 {
  color: #e5780d;
  font-family: Courier;
  letter-spacing: 3px;
  margin-left:.5%;

}
p{margin-left:.5%;
  word-spacing:4px }

#black {
  margin: 3px solid black;
  word-spacing: 4px;
  margin:left:.75%;
}

h3 {
  color: #e5780d;
  font-family: Courier;
  letter-spacing: 3px;
}

span { vertical-align: baseline; }

#first { font-size:16px;
         margin-left:5.5%;
         }

#second {font-size:16px;
         margin-left:9.1%}

#third{font-size: 16px;
        margin-left:8.6%}

#left {
  float: left;
  text-align: justify;
  display: inline-block;
  color: white;
  margin-left: 2%;
  background: #e5780d;
  width: 14%;
  border-radius: 10px;
  font-size:12px;
  font-style:Bold;
}

#center {
  display: inline-block;
  float: left;
  margin-left: 2.001%;
  color: white;
  background: #e5780d;
  width: 14%;
  border-radius: 10px;
  font-size:12px;
  font-style:Bold
}

#right {
  display: inline-block;
  float: left;
  text-align: left;
  color: white;
  margin-left: 2.002%;
  background: #e5780d;
  width: 14%;
  border-radius: 10px;
  font-size:12px;
  font-style:Bold;
}

Fiddle

最佳答案

我快速 fork 了你原来的 codepen只是想看看我是否可以帮助您了解您在做什么。没有完整的教程，快速而肮脏的是您需要使用正确的标记，然后还需要智能地分组。

我只为您构建了导航，因为除了为您完成工作之外，我希望您也能学到一些东西。 HTML 看起来像这样:

  <header>
  <img src="http://s32.postimg.org/5bebu6mbl/Image_5_8_16_at_12_10_PM.jpgHome" />
    <nav role="navigation">
      <a href="#">Home</a>
      <a href="#">Televisions</a>
      <a href="#">Electronics</a>
      <a href="#">Services</a>
    </nav>
</header>
<main>
 <p>Content goes here</p>
</main>

基本的 CSS 应该是这样的:

    body{
 background:black; 
}
header {
  background: #789;
  color: Black;
  font-family:sans-serif;
}
header *{
  display:inline-block;
  border-radius:4px;
}
nav {
  background:white;
  position:relative;
  top:-2rem;
  padding:.7rem 1rem;
  padding-right: 4rem;
}
nav a{
  text-decoration:none;
  color:black;
  padding:.4rem .6rem;
}
nav a:hover{
  border:1px solid black;
  background:lightgray;
}
main{
  margin-top:10px;
  padding-top:.5rem;
  height:100%;
  border-radius:1rem;
  background:white;
}

希望如果你看一下我为你做的代码笔，你至少会有一个起点，我可以回答你可能有的任何具体问题。

*** 编辑 ** block 元素的 html 我可能会做类似的事情:

<section>
    <div>
      Block stuff goes here.
    </div>
    <div>
      Block stuff goes here.
    </div>
    <div>
      Block stuff goes here. 
    </div>
  </section>

我还会向每个类添加可能的类，以便您可以单独控制这些外部分组。

我要做的最后一件事是学习使用 flexbox，并将适当的 CSS 应用到外部部分。

希望我有所帮助! :)

关于html - 边框导致 div 和段落对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37146562/

26 4 0
文章推荐： c++ - 如何在游戏板上随机放置一艘船
文章推荐： Swift 闭包和错误处理
文章推荐： javascript - 将页面源代码嵌入网站
文章推荐： c++ - QNetworkReply 没有数据
行者123
个人简介

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

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