#html #css
Вопрос:
Я хочу оформить элемент «Забыть пароль» так, чтобы он отображался в правой части. Это возможно при ширине, установленной на 100%, но я также замечаю, что пустое пространство перед текстом также содержит свойство ссылки. Я попытался использовать ширину как 50%, но это отодвигает текст назад в левую сторону. Как я могу достичь того, чего хочу?
#forgotP { color: blue; text-decoration: none; display: block; width: 50%; text-align: right; font-size: 12px; font-weight: 300; } lt;div class="box"gt; lt;form autocomplete="off"gt; lt;input type="text" id="username" name="username" placeholder="Username"gt;lt;brgt; lt;pgt;lt;a href="#" target="_black" id="forgotP"gt;Forgot Password?lt;/agt;lt;/pgt; lt;input type="password" id="password" name="password" placeholder="Password"gt;lt;brgt; lt;input type="button" value="Register" id="register" class="inline"gt; lt;input type="button" value="Login" id="login" class="inline"gt; lt;/formgt; lt;/divgt; Ответ №1:
Вы можете использовать CSS flexbox, чтобы сделать это.
.box { width: max-content; } p { display: flex; justify-content: flex-end; } #forgotP { color: blue; text-decoration: none; font-size: 12px; font-weight: 300; } lt;bodygt; lt;div class="box"gt; lt;form autocomplete="off"gt; lt;input type="text" id="username" name="username" placeholder="Username"gt;lt;brgt; lt;pgt;lt;a href="#" target="_black" id="forgotP"gt;Forgot Password?lt;/agt;lt;/pgt; lt;input type="password" id="password" name="password" placeholder="Password"gt;lt;brgt; lt;input type="button" value="Register" id="register" class="inline"gt; lt;input type="button" value="Login" id="login" class="inline"gt; lt;/formgt; lt;/divgt; lt;/bodygt; Редактировать
добавить код CSS
p { display: flex; justify-content: flex-end; } Комментарии:
1. Пробовал это, но, похоже, это не работает. Пустое место перед тем, как Забыть пароль, все еще связано.
2. @Nikhat Другой способ обойти это использовать css flex. я добавил css в свой предыдущий ответ и использую css flexbox. Попробуйте, дайте мне знать, если это сработает.
3. Это работает, спасибо!