HTML/CSSの書式設定に問題があります。

-2

私はionicでシンプルなアプリを作ったので、私はCSSとHTMLをフォーマットしています。私は私のアプリを本当に素敵に見せようとしています。今のところは、入力テキストフィールドと入力ボタンです。私はマージン/パディングで苦労しています。ここに私のコードは次のとおりです。HTML/CSSの書式設定に問題があります。

.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

は灰色で、すべての奇妙で、ヘッダはまた、いくつかの色が欠けているかを参照してください？私はこれを修正するいくつかの助けが必要です。また、アプリをプロフェッショナルに見せるためのヒントを気にしません！ありがとうございます！:)

出典

2016-08-19 Austin Hunter

ブラウザコンソールを開いて、ボックスモデルを見て、適切に表示されない要素のCSSルールを適用します。 – Xufox

私はちょうどコンソールをチェックし、それは私のために物事をクリアしていません –

jsフィドルplsを提供します。 –

さて、問題はあなたが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; 
}

クイックリファレンス：@Aldoseから回答に加えてhttps://css-tricks.com/the-css-box-model/

出典

2016-08-19 04:10:08 Aldose

...あなたはこれを試すことができます余裕を持つヘッダーを修正するには。

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

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

出典

2016-08-19 04:17:18 theLearner

HTML/CSSの書式設定に問題があります。

答えて

関連する問題