html - 如何在网页文章之间缩进/添加空格？网页格式-6ren

html - 如何在网页文章之间缩进/添加空格？网页格式

转载作者：行者123 更新时间：2023-11-28 17:25:10

我想在这些文本框之间添加空格，最好的方法是什么？我尝试了一些东西，但没有太多成功。干杯

我要空间的区域 http://imgur.com/a/Aj2Vl

https://jsfiddle.net/xo1uf1ym/

<!DOCTYPE html>
<html>
<head>
   <title> Kontakt </title>
   <link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
   <div class="container">           
   <h1 align="center">
   <a href="index.html"><img src="logo.png" alt="A.Willi A.G" /></a>
</h1>    

<div class="menu_div">
   <ul>
   <li><a href="index.html">Home</a></li> 
   <li><a href="kontakt.html">Kontakt</a></li>
   <li class="dropdown">
   <a href="#" class="dropbtn">Bewerber</a>
   <div class="dropdown-content">
   <a href="#">Info</a>
   <a href="jobs.html">Jobs</a>
</div>  
</li>      
   <li class="dropdown"><a href="#" class="dropbtn">Kunde</a>
   <div class="dropdown-content">
   <a href="personalverleih.html">Personalverleih</a>
   <a href="toolrental.html">Werkzeuge Mieten</a>
   <a href="referenzen.html">Referenzen</a>
   <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
</li> 
</div>
   <div class="fadein"> 
   <img src="welder6.png">
   <img src="welder1.png">
   <img src="welder1.png"> 
</div>  
<header>
   <h1 style="text-align:right; font-weight: normal;"> zur Stelle. </h1>
</header>
   <div class="flex-container">

<article class="article">
  <a href="upload1.html"><h1>Rohrschlosser/Schweisser</h1></a>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia,
  its history going back to its founding by the Romans, who named it Londinium.</p>
  <p><strong>Resize this page to see that what happens!</strong></p>
</article>
<article class="article">
  <h1>Rohrschlosser/Schweisser</h1>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia,
  its history going back to its founding by the Romans, who named it Londinium.</p>
  <p><strong>Resize this page to see that what happens!</strong></p>
</article>

<article class="article">
  <h1>Rohrschlosser/Schweisser</h1>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia,
  its history going back to its founding by the Romans, who named it Londinium.</p>
  <p><strong>Resize this page to see that what happens!</strong></p>
</article>

<article class="article">
  <h1>Rohrschlosser/Schweisser</h1>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia,
  its history going back to its founding by the Romans, who named it Londinium.</p>
  <p><strong>Resize this page to see that what happens!</strong></p>
</article>

<article class="article">
  <h1>Rohrschlosser/Schweisser</h1>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia,
  its history going back to its founding by the Romans, who named it Londinium.</p>
  <p><strong>Resize this page to see that what happens!</strong></p>
</article>
</div>
</body> 
</html>



body { font-family: verdana; background:white ; color: black; }


}

.menu_div{background-color: #333; width:100%;}
ul {
    list-style-type: none;
    margin: 0 auto;
    display:table;
    padding: 0;
    z-index: 100;
    overflow: hidden;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: black;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

        @keyframes fade {
        0%   { opacity: 0; }
        11.11%   { opacity: 1; }
        33.33%  { opacity: 1; }
        44.44%  { opacity: 0; }
        100% { opacity: 0; }
}

    .fadein { position:absolute; height:500px; width:49px; outline: 1px solid blue; }
    .fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
    .fadein img:nth-child(1) { animation-delay: 0s;  }
    .fadein img:nth-child(2) { animation-delay: 3s;  }
    .fadein img:nth-child(3) { animation-delay: 6s;  }

.menu_div { 
  position: relative;
  z-index: 0;
  height: 2.9em;
  margin-bottom: -0.4em;
  margin-top: 0em;
  z-index:1000;
  background-color: #333


}
.fadein { 
  position: relative;
  z-index: 3; 
  background: ;
  width: 100%;
  left: -0.5px;
  top: 0em;


  }

.fadein img{
    margin:0 auto;
    width: 100%;
    max-width: 4060px;
    min-width: 900px;
    max-height: 400%;
}




.tech-slideshow {
  height: 200px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.tech-slideshow > div {
  height: 100px;
  width: 100px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/collage.jpg);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
  animation: moveSlideshow 12s linear infinite;
}
.tech-slideshow .mover-2 {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  background-position: 0 -200px;
  animation: moveSlideshow 15s linear infinite;
}
.tech-slideshow:hover .mover-2 {
  opacity: 1;
}

@keyframes moveSlideshow {
  100% { 
    transform: translateX(-66.6666%);  
  }
}


form {
  background-color: #f7f7f7;
  border: 2px solid black;

  /* Just to center the form on the page */
  margin:  auto;
  width: auto;
  height: auto;

  /* To see the limits of the form */
  padding: 10em;
}

div + div {
  margin-top: 0.3em;
}

label {
  /* To make sure that all label have the same size and are properly align */
  display: inline-block;
  width: 130px;
  text-align: left;
}

input, textarea {
  /* To make sure that all text field have the same font settings
     By default, textarea are set with a monospace font */
  font: 1em verdana;

  /* To give the same size to all text field */
  width: 200px;

  -moz-box-sizing: border-box;
       box-sizing: border-box;

  /* To harmonize the look & feel of text field border */
  border: 2px solid ;
}

input:focus, textarea:focus {
  /* To give a little highligh on active elements */
  border-color: black;
}

textarea {
  /* To properly align multiline text field with their label */
  vertical-align: top

  /* To give enough room to type some text */
  height: 23em;

  /* To allow users to resize any textarea vertically
     It works only on Chrome, Firefox and Safari */
  resize: vertical;
}

.button {
  /* To position the buttons to the same position of the text fields */
  padding-left: 400px; /* same size as the label elements */
}

button {
  /* This extra magin represent the same space as the space between
     the labels and their text fields */
  margin-left: 2em;
}

.container {
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.image-upload > input
{
    display: none;
}

.image-upload img
{
    width: 70px;
    cursor: pointer;

}



.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
    border: -0.2px solid #CCCCCC;
}

.flex-container > * {
    padding: 150px;
    -webkit-flex: 1 110%;
    flex: 1 100%;
    height: 70px;
    border: 6px solid #CCCCCC;
    height: 200px:
}

.article {
    text-align: left;
    height: 200px;
}

header {
background: white;color:black;
font-size: 0.9em;
}


footer {background: #333;color:white;
position: absolute;
bottom: -641px;
width: 1117px;

}

@media all and (min-width: 768px) {
    .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
    .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
    footer {-webkit-order:3;order:3;}
}

.swiss {
position: absolute;
right: 390px;
bottom: -170px;
}


.indexinfo {

padding:70px;
-webkit-flex: 1 100%;
flex: 1 110%;
height: 70px;
border: px solid black;
height: 200px:
text: center;

}

.sidebar-image-gallery { 

height: 700px;
width: 1323px;

}


    display: block;
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

最佳答案

“文章”类的边距如何？

例如:

.article {
    text-align: left;
    height: 200px;
    margin-top: 100px;
}

关于html - 如何在网页文章之间缩进/添加空格？网页格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40652019/

文章推荐： html - 盒子上的空间太多 - HTML

文章推荐： javascript - 使用特定 Prop 进行连接组件测试(React/Redux)

文章推荐： html - 删除主体与其元素之间的空间？

缩进
我正在使用 libxml2 的 xmlwriter api 编写一个 xml 文件。当我使用记事本打开文件时，缩进不正确。有人知道怎么解决吗？非常感谢。最佳答案我在这里有点冒进，但我会说“缩
python 缩进
我正在尝试让这个脚本工作，但它...给我缩进错误 #!/usr/bin/env python import io myfile = open('stats.txt', 'r') dan = myfil
Emacs 缩进/取消缩进当前行
我使用 Emacs 有一段时间了，我真的很想念一个古老的 Geany 快捷方式 - “C-i”和“C-u”。 “C-i”缩进整个当前行(将鼠标光标保持在原处)，“C-u”取消整个当前行的缩进。我发现
iphone - UILabel文本偏移/缩进
如何向 UILabel 内的文本添加缩进或偏移？它需要是特定的像素大小，与字体大小无关。最佳答案您可以创建另一个UILabel，然后将每个标签的框架设置为一定的宽度，这样，如果您想要实现这一目标，
Emacs Haskell 缩进
请帮我在 Emacs haskell-mode 中设置正确的缩进当我尝试输入诸如 ADT 或记录之类的内容时，按后我进入了错误的列。，然后按不会切换到右边，直到我输入 |或者 ';'! d
子项目符号点的 Visio 缩进
我在 Visio 2010 中有一个项目符号列表，我试图在其中缩进二级项目符号。例如: 我希望“子项目符号”项目向右缩进，这样很明显它是一个子元素。我认为功能区上的“增加缩进”选项可以做到这一点，但这
haskell - 为什么要解析错误？缩进？
我写了这段代码: addNums key num = add [] key num where add res a:as b:bs | a == [] = res
谷歌代码美化 xml 缩进
我在生成的 xml 文档中添加了换行符。 "\n" some text etc."\n" "\n" 这最终应该是: some text etc. 这是否可以通过 google-code-pre
java - JTabbedPane 缩进
使用 JTabbedPane 时，如何缩进选项卡？ Swing 默认输出: ------- --------- ------ | A | | B | | C | --------
javascript - CoffeeScript 缩进
我收到这些行的缩进错误有没有在线验证器可以帮助我？ showAliveTests : (pageIndex, statusFilter) -> data= pageI
将循环语句添加到现有代码时的 Python 缩进
在 Python 中，当你写了 100 行代码而忘记在某个地方添加一堆循环语句时，你会怎么做？我的意思是，如果您在某处添加一个 while 语句，您现在必须缩进它下面的所有行。这不像您可以戴上牙套并
html - CSS 缩进
我喜欢这样做，如 indesign 或 quark...段落缩进...图片如何在 html 和 css 中做到这一点的正确方法我不希望文字环绕图像...我喜欢保护整个左边的部分给图片留边距就可以了
css -
缩进
我试过添加 10px 的内边距但没有成功。你可以看到它的一个例子lower down on this page . #menu li { float: left;
python - python中简单while循环的问题(缩进)
这个问题在这里已经有了答案: I'm getting an IndentationError. How do I fix it? (6 个答案) 关闭去年。 while 1 == 1:
C# 打印空格/缩进
您好，我正在尝试使用来自 C# 应用程序的收据打印机打印帐单/收据。预期的输出是这样的: ITEM NAME QTY PRICE Banana Large Y
java - JTextPane 缩进
有没有办法在 JTextPane 中缩进一段文本？ import javax.swing.*; import java.awt.*; import javax.swing.text.StyledDoc
c - 缩进#define
我知道 #define 等通常从不缩进。为什么？我目前正在编写一些代码，其中混合了#define、#ifdef、#else s、#endifs 等。所有这些通常与普通 C 代码混合在一起。 #def
哈希数组的 YAML 缩进
我认为缩进在 YAML 中很重要。我在 irb 中测试了以下内容: > puts({1=>[1,2,3]}.to_yaml) --- 1: - 1 - 2 - 3 => nil 我期待这样的事情:
Vim:C++ 用 # 缩进
我在带有 openmp 语句的 C++ 代码中使用 Vim。而在我的 ~/.vimrc set ai " auto indent 我的问题:当我使用 openmp 语句(以 # 开头)时，光标会跳
parsing - 使用 Megaparsec 缩进
我想使用 Megaparsec 解析一种基本的缩进语言。最初我使用的是 Parsec，我设法通过缩进正常工作，但现在我遇到了一些麻烦。我一直在关注一个教程here这是我必须解析一种忽略缩进的语言的代

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何在网页文章之间缩进/添加空格？网页格式