Html-форма - не будет отображаться вместе со ссылкой в ​​виде прямой линии

У меня есть div, содержащий форму и ссылку, которые я хочу отобразить в виде прямой линии. Форма отображается правильно .... ссылка возвращается на следующую строку и полностью выходит за пределы div. Я просмотрел как html, так и css и не нашел проблемы.

Обратите внимание, что я уже пробовал делать white-space:nowrap.

HTML-код div:

 <div class="container">
        <form action="" method="post">
        <b>Text Here</b>
        <input type="radio" name="" value="">Option</input>
        <input type="radio" name="" value="">Option</input>
        <input type="search" placeholder="">
        <input type="submit" name="" value="Search!">
        </form>
        <a href="">Compose</a>
    </div>

CSS для div:

 .container{
    margin-top: 5px;
    float: right;
    width: 75%;
    height: 50px;
    white-space: nowrap;
    border: 2px solid black;
}
1
0
59
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ваша метка <a> находится за пределами вашего <form>. Если просто включить его в форму, все элементы будут выстроены в строку. Кроме того, <input> является пустым элементом, поэтому не имеет закрывающего тега.

Это исправлено в следующем:

.container {
  margin-top: 5px;
  float: right;
  width: 75%;
  height: 50px;
  white-space: nowrap;
  border: 2px solid black;
}
<div class="container">
  <form action="" method="post">
    <b>Text Here</b>
    <input type="radio" name="" value="" />Option
    <input type="radio" name="" value="" />Option
    <input type="search" placeholder="" />
    <input type="submit" name="" value="Search!">
    <a href="">Compose</a>
  </form>
</div>

Если вы хотите, чтобы ссылка находилась за пределами <form>, вам нужно присвоить как display: inline-block, так и <form> достаточно маленький width, чтобы содержать ссылку в одной строке. Ниже я присвоил обоим элементам width или 50%:

.container {
  margin-top: 5px;
  float: right;
  width: 75%;
  height: 50px;
  white-space: nowrap;
  border: 2px solid black;
}

form, a {
  width: 50%;
  display: inline-block;
}
<div class="container">
  <form action="" method="post">
    <b>Text Here</b>
    <input type="radio" name="" value="" />Option
    <input type="radio" name="" value="" />Option
    <input type="search" placeholder="" />
    <input type="submit" name="" value="Search!">
  </form>
  <a href="">Compose</a>
</div>

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

В этом случае ссылка compose находится внутри текстового поля. он должен идти после кнопки search

Shiv Kumar Baghel 26.10.2018 05:43
Ответ принят как подходящий

использовать класс для form и link с display: inline-block;

.container{
    margin-top: 5px;
    float: right;
    width: 75%;
    height: 50px;
    white-space: nowrap;
    border: 2px solid black;
}

form {
  display: inline-block;
}

.link {
  display: inline-block;
}
<div class="container">
     <form action="" method="post">
        <b>Text Here</b>
        <input type="radio" name="" value="" />Option
        <input type="radio" name="" value="" />Option
        <input type="search" placeholder="" />
        <input type="submit" name="" value="Search!" />
     </form>
     <a href="" class="link">Compose</a>
</div>
 

добро пожаловать :) вы можете принять в качестве ответа, если он решит вашу проблему. Счастливое кодирование

Shiv Kumar Baghel 26.10.2018 07:19

Другие вопросы по теме