Проблемы с форматированием HTML/CSS.

-2

Так что я сделал простое приложение в ионном формате, и я форматирую свои 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

Посмотрите, как серый все это странно и заголовок также отсутствует какой-то цвет? Мне нужна помощь в этом. Также я бы не возражал против некоторых советов css о том, чтобы приложение выглядело профессиональным! Спасибо заранее! :)

источник

2016-08-19 Austin Hunter

Откройте консоль браузера и просмотрите модели полей и применяйте правила CSS для элементов, которые не отображаются должным образом. – Xufox

Я только что проверил консоль, и это не выяснило меня для меня. –

предоставить js fiddle 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; 
}

Краткий справочник для моделей коробки: https://css-tricks.com/the-css-box-model/

источник

2016-08-19 04:10:08 Aldose

В дополнении к ответу от @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.

ответ

Смежные вопросы