Я быстро нацарапал следующую страницу
Но то, что я хочу представить (это то же, что и другое размещение)
Мой оригинальный код был
<body>
<p><b>My Title</b></p>
<input type="radio" name="ReTranslate" id="TranslateByDate" value="ByDate" checked="checked">By Date:
<input type="text" id="PackagesDate" /><br>
<input type="radio" name="ReTranslate" id="TranslateByGuid" value="ByGuid">By Guid
<input type="text" id="PackageGuid"> <br>
<input type="radio" name="ReTranslate" id="TranslateByKey" value="ByKey">By Key:
Field name <input type="text" id="PackageName"> Field number <input type="text" id="VersionNumber"> User name <input type="text" id="UserName"><br>
<br>
<button type="button">ReTranslate</button>
</body>
Как я могу управлять размещением элементов?
Благодарю.
Вы можете сделать это двумя способами:
Таблицы (простой способ)
Используя таблицы, вы можете сделать так:
<table>
<tr>
<td>
<input type="radio" name="ReTranslate" id="TranslateByDate" value="ByDate" checked="checked">By Date:
</td>
<td><input type="text" id="PackagesDate" /></td>
</tr>
</table>
CSS
Добавьте <ul></ul>
.
<ul>
<li><label for=""></label><input type="text"></li>
<li><label for=""></label><input type="text"></li>
<li><label for=""></label><input type="text"></li>
<li><label for=""></label><input type="text"></li>
</ul>
И дайте label
какой-то стиль, как:
label {display: inline-block; width: 75px;}
Резюме
Использование <table>
для макетов не рекомендуется для макетов. Использование <ul>
полезно для семантики.
У вас есть несколько вариантов.
Попробуйте разместить br-теги между текстом "By Key:", "Имя поля", "Номер поля" и "Имя пользователя". Затем после этого установите желаемый запас в левой части текста. (Маржа налево:... рх)