HTML/CSS格式问题

HTML/CSS formatting trouble.

本文关键字：问题 格式 CSS HTML      更新时间：2023-09-26

所以我在ionic做了一个简单的应用程序，我正在格式化我的css和html。我正在努力使我的应用程序看起来非常漂亮。它现在只有一个输入文本框和一个输入按钮。我有一个艰难的时间与我的边距/填充，不确定。下面是我的代码:

.title {
    background-color: #e6ffff;
}
input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
    
}
input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    vertical-align: middle;
    display: inline-block;
    border: none;
    text-align: center;
    width: 100%;
    margin-top: 15px;
}
div {
    margin-top: 50px;
    margin-left: 120px;
    margin-right: 120px;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 15px;
}
<body ng-app="starter">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Push Notifications</h1>
      </ion-header-bar>
      <ion-content>
          <div ng-controller="myCtrl">
              <form>
                <input type="text" class="messageText" placeholder="Message" ng-model="messageText">
                <input type="submit" ng-click="submit()">
              </form>      
          </div>
      </ion-content>
    </ion-pane>
  </body>

应用程序在浏览器中运行图片

看到灰色是多么奇怪，标题也缺少一些颜色吗?我需要一些帮助来修理这个。此外，我不介意一些css技巧，使应用程序看起来专业!提前感谢!:)

好的，问题在于如何在DOM中放置内容。最快的解决方案是将样式添加到表单中，并从包装它的div中取出一些样式。

form{
 background:pink;
 background-color: #f2f2f2;
 padding:15px;
 border-radius: 5px;
}
div {
 margin-top: 50px;
 margin-left: 120px;
 margin-right: 120px;
 padding: 15px;
}

快速参考框模型:https://css-tricks.com/the-css-box-model/

除了@Aldose的答案…要修复页眉有空白，你可以试试这个。

body , html
{
  padding:0px;
  margin:0px;
  width:100%;
  height:100%;
}
.title {
  background-color: #e6ffff;
  padding:0px;
  margin:0px;
}
相关文章：