Nano Hash - криптовалюты, майнинг, программирование

Выровняйте поле ввода (имя) и кнопку отправки

Я только недавно занялся html и css и немного застрял на этом. Я работаю над полем входа в систему, и я не могу заставить окно входа и кнопку отправки идеально совпадать друг с другом.

Единственный способ, которым это работало, заключался в том, что если бы я написал их обоих в одной строке, как это, тогда они были бы (горизонтально) идеально выровнены, но я не мог изменить расстояние между ними:

Первая попытка (код без точки после ‹): ‹.input type="text" id="username">submit

Потом я разобрался как-то иначе. Он состоит из текста типа ввода и отправки типа ввода в моем html-файле.

В моем файле CSS я сначала вызываю класс, в котором перечислены все мои входные данные для входа (.logsec для раздела входа), а затем идентификатор моего текста типа ввода и тип ввода.

Класс называется logsec (для раздела «Вход»), а мой тип ввода называется id = Button, а текст моего типа ввода называется id = subinput.

HTML-код:

<html lang="en">

  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/font.css">



<head>
    <meta charset="utf-8">
    <title>Main</title>

</head>

<body>
    <div class="container">
        <div class="brandname">
            <h1 <id="title" class=""><span id="logo">Test</h1>
        </div>
        <div class="logsec">
            <div class="box-header">
                <p> login</p>
        </div>

            <input type="submit" id="button" value="submit" style="float:right"/>
            <input type="text" id="subinput" style="width:100%;"/> 
        <a href="#"><p class="recover">Recover Password</p></a>     
            <h3> <a href=".../css/style.css"> <p class="signup">signup</a> </h3> 
                   <footer> <p Class="footer">LOGIN</p></footer>   
        </div>                              
</body>                            


</html> 

КОД CSS:

body {

  background-color: grey;

  font-size: 30px;

  text-align: center;
}



.brandname {

  margin-top: 300px;
}

.recover {

    font-size: 15px;

    text-align: center;
}

.signup {

    font-size: 15px;

    text-align: center;
}



/*///////////////////// LOGIN BUTTON ///////////////////////////////////////*/

.logsec [id=button] {

  vertical-align: top;

Было бы очень приятно, если бы кто-то мог помочь мне здесь. Я ужасен в этом, но я надеюсь, что кто-то может мне помочь.

Спасибо, парни.

06.07.2016

  • Пожалуйста, разместите код здесь, как код НЕ как и изображение 06.07.2016
  • Добавление кодовой ручки или просто использование кнопки кода — это, безусловно, правильный путь — мало чем можно помочь, основываясь на изображении, без большой ручной работы по его расшифровке. 06.07.2016
  • Когда вы вставите HTML-код, выберите его и нажмите ctrl + k. 06.07.2016
  • Сейчас добавил код к вопросу - извините за ранее упущенное. Цените любую помощь, чтобы решить эту проблему. 07.07.2016

Ответы:


1

В вашем коде было несколько ошибок, одна из которых ".logsec [id=button]" мешала выравниванию кнопок. Я удалил float и вместо этого использовал встроенный блок. Погуглите, я уверен, что у W3C есть несколько руководств. В любом случае, вот рабочий код:

CSS

body {

    background-color: grey;

      font-size: 30px;

      text-align: center;
    }



    .brandname {

      margin-top: 300px;
    }

    .recover {

    font-size: 15px;

    text-align: center;
}

.signup {

    font-size: 15px;

    text-align: center;
}


#subinput {
  display: inline-block;
}

HTML

<div class="container">
    <div class="brandname">
    <h1 id="title"><span id="logo">Test</span></h1>
    </div>
    <div class="logsec">
        <div class="box-header">
            <p> login</p>
    </div>


        <input type="text" id="subinput"/> 
        <input type="submit" id="button" value="submit"/>
    <a href="#"><p class="recover">Recover Password</p></a>     
        <h3> <a href=""> <p class="signup">signup</a> </h3> 
               <footer> <p Class="footer">LOGIN</p></footer>   
    </div> 

Здесь он работает на скрипке (надеюсь, я не знаю, как долго сохраняется код) FIDDLE

07.07.2016
  • Привет! Большое спасибо!. Итак, вы удалили .logsec [id=button] { vertical-align: top; , стиль=ширина:100%; и стиль=поплавок:право. Кто из них был ответственным? Спасибо еще раз. 07.07.2016
  • Нет проблем :) Да, код, который вы разместили, был обрезан после .logsec [id=button] { vertical-align: top; Так что я не знаю, что произошло после этого, но это мешало выравниванию кнопок. Затем я взял встроенные стили из html и добавил display: inline-block в css. Это еще один способ плавать без поплавков. Рад помочь :) 07.07.2016
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..