Question

所以我在离子中创建了一个简单的应用程序，我正在格式化我的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>

Picture of the app running in the browser

看看灰色是多么奇怪，标题也缺少一些颜色？我需要一些帮助解决这个问题。此外，我不介意一些关于使应用程序看起来专业的CSS提示！在此先感谢！:)

Answer 1

好的，问题在于你如何在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/

Answer 2

除了来自@Aldose的答案...要修复具有边距的标题，您可以试试这个。

body , html
{
  padding:0px;
  margin:0px;
  width:100%;
  height:100%;
}

.title {
  background-color: #e6ffff;
  padding:0px;
  margin:0px;
}

HTML / CSS格式化麻烦。

2 个答案: