Как сохранить текст рядом с текстовым полем на странице html - PullRequest
0 голосов
/ 30 марта 2020

Попытка с кодом ниже, но не получая точный вывод. Может кто-нибудь помочь мне здесь?

<head>
    <title>question3</title>
</head>
<body>
    <form>
        name:<input type="text" name="hjcg"><p style="text-align: right">jgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</p>
        username::<input type="text" name="hjcg"><span style="text-align: right">hjgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</span>
    </body>
</html>![enter image description here](https://i.stack.imgur.com/OCSnC.jpg)![enter image description here](https://i.stack.imgur.com/XQkvB.jpg)

Ответы [ 2 ]

0 голосов
/ 30 марта 2020

Использование Flex должно решить вашу проблему, но вам определенно следует рассмотреть возможность использования внешнего css файла. Вы можете добавить его на свою html страницу с помощью:

<link href="your_style_file.css" rel="stylesheet">

, тогда вы можете попробовать:

form{
    display: flex;
}

или даже лучше, придав вашей форме класс или идентификатор типа

<form id="my-form">

или

<form class="these-forms">

, а затем

#my-form{
    display: flex;
}

или

.these-forms{
    display: flex;
}

Пожалуйста, отметьте FlexBoxFroggy , если вы хотите изучить основы Flex за считанные минуты.

То, что вы на самом деле делаете с text-align, это выравнивание текста внутри его контейнера. Что вы хотите при выравнивании элементов внутри формы. Отображение формы как Flex поможет вам в этом.

0 голосов
/ 30 марта 2020

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

Чтобы элементы отображались на следующей строке, можно использовать

теги, которые по умолчанию являются элементами уровня блока (которые также можно изменить с помощью css)

<html>

<head>
  <title>question3</title>
</head>

<body>
  <form>
    <div>
      name:<input type="text" name="hjcg">
      <span style="text-align: right">jgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</span>
    </div>
    <div>
      username:<input type="text" name="hjcg">
      <span style="text-align: right">hjgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</span>
    </div>
  </form>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...