Элементы Fieldset не совпадают

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

/*
MFN0634, Lab 04 (NerdLuv)
You should link to this provided stylesheet from all of your pages.
You should not need to modify this file.  Your pages should work with it as-is.
*/

* {
	font-size: 12pt;
	font-family: "Verdana", "Geneva", sans-serif;
}

a {
	color: #F44;
	text-decoration: none;
}

a:hover {
	background-color: #FFA;
}

a img {
	border: none;
}

#bannerarea {
	margin-bottom: 2em;
}

body {
	background-color: white;
	padding-left: 1em;
}

body > div, form {
	overflow: hidden;
	width: 35em;
}

div {
	overflow: hidden;
}

/* form styles */
fieldset {
	background-color: #E0E0FF;
	border: 2px outset gray;
	border-radius: 10px;
}

/* the bold text labels to the left of each form field */
fieldset strong,
ul strong,
fieldset label.left,
fieldset .column {
	float: left;
	width: 11em;
}

h1 {
	margin-top: 0em;
}

input[type = "submit"] {
	background-color: #FAA;
	font-size: 120%;
	font-weight: bold;
}

legend {
	background-color: white;
	border: 2px outset gray;
	padding: 0.2em;
}

.match {
	margin-bottom: 1em;
}

.match img {
	width: 150px;
	float: left;
	margin-right: 10px;
	margin-bottom: 3em;
}

.match p {
	background-color: #E0E0FF;
	clear: left;
}

.match ul {
	padding-left: 160px;
}

ul {
	list-style-type: none;
	padding-left: 0em;
}

ul li a img {
	vertical-align: middle;
}

#w3c {
	clear: both;
}

<body>
<form action = "signup-submit.php" method = "post" name = "datiUtenti">
  <fieldset>
    <legend>New User Signup:</legend>
    <div class = "column">
    <b>Name:</b><br>
    <b>Gender:</b><br>
    <b>Personality type:</b><br>
    <b>Favorite OS:</b><br>
    <b>Seeking age:</b><br>
    </div>
    <div class = "left">
    <input type = "text" name = "name"/></br>
    <input type = "radio" name = "gender" value = "male"> Male
    <input type = "radio" name = "gender" value = "female" checked> Female</br>
    <input type = "text" name = "eta" maxlength = "2" size = "6" /></br>
    <input type = "text" name = "pt" maxlength = "4" size = "6" 
    placeholder = "ENTJ" />
    <a href = "http://www.humanmetrics.com/cgi-win/JTypes2.asp">
	(Don't know your type?)</a></br>
	<select name = "sistema">
      <option value = "linux" selected = "selected">Linux</option>
      <option value = "windows">Windows</option>
      <option value = "macosx">Mac OS X</option>
    </select></br>
    <input type = "text" name = "seek1" maxlength = "2" size = "6" placeholder = "20" /> to
    <input type = "text" name = "seek2" maxlength = "2" size = "6" placeholder = "45" /></br>
    </div>
    <input type = "submit" value = "Sign Up">
  </fieldset>
</form>
</body>

Я не могу изменить файл css. Я попытался разделить его на две колонки, но это не сработало. Если я использую тег для левой части, он будет больше, чем правая часть, поэтому я использовал.

Можете ли вы изменить HTML и предоставить в линию CSS? Иначе у вас не получится.

— 06.11.2018 20:14

html css

06.11.2018 20:02

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

245

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

<body>
    <form action = "signup-submit.php" method = "post" name = "datiUtenti">
        <fieldset>
            <legend>New User Signup:</legend>
            <table>
                <tr>
                    <td><b>Name:</b></td>
                    <td>
                        <input type = "text" name = "name" />
                    </td>
                </tr>
                <tr>
                    <td><b>Gender:</b></td>
                    <td>
                        <input type = "radio" name = "gender" value = "male"> Male
                        <input type = "radio" name = "gender" value = "female" checked>Female</td>
                </tr>
                <tr>
                    <td> <b>Personality type:</b></td>
                    <td>
                        <input type = "text" name = "eta" maxlength = "2" size = "6" />
                        <br>
                        <input type = "text" name = "pt" maxlength = "4" size = "6" placeholder = "ENTJ" />
                        <a href = "http://www.humanmetrics.com/cgi-win/JTypes2.asp">
	(Don't know your type?)</a></td>
                </tr>
                <tr>
                    <td><b>Favorite OS:</b></td>
                    <td>
                        <select name = "sistema">
                            <option value = "linux" selected = "selected">Linux</option>
                            <option value = "windows">Windows</option>
                            <option value = "macosx">Mac OS X</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><b>Seeking age:</b></td>
                    <td>
                        <input type = "text" name = "seek1" maxlength = "2" size = "6" placeholder = "20" /> to
                        <input type = "text" name = "seek2" maxlength = "2" size = "6" placeholder = "45" />
                    </td>
                </tr>

                <tr>
                    <td>
                        <input type = "submit" value = "Sign Up">
                    </td>
                </tr>
            </table>
        </fieldset>
    </form>
</body>

Не используйте <table> для верстки. Ответ с простым образцом кода - плохой. Объясните, почему это сработало и что вы сделали.

— 06.11.2018 20:34

Я бы начал прямо сейчас с этого ответа, или вы можете получить больше голосов против.

— 06.11.2018 20:45

06.11.2018 20:16