<div class="input-group"> <label id="username-label">请输入用户名:</label> <input type="text"id="username"name="username" style="border-bottom:1pxsolidblack; padding-bottom:2px; display:inline-block;"> </div>为什么label和text不在同一行
时间: 2023-07-19 16:39:08 浏览: 39
在这个代码段中,label 和 input 元素被包含在一个 div 元素中,并且 div 元素默认的 display 属性为 block,这意味着 div 元素会占据一整行的宽度,从而导致 label 和 input 元素不能在同一行显示。
为了让 label 和 input 在同一行显示,我们可以将 div 元素的 display 属性设置为 inline-block 或者 inline。这样 div 元素就会像行内元素一样显示,从而使 label 和 input 元素在同一行显示。
以下是示例代码:
```html
<div class="input-group" style="display: inline-block;">
<label id="username-label">请输入用户名:</label>
<input type="text" id="username" name="username" style="border-bottom:1px solid black; padding-bottom:2px; display:inline-block;">
</div>
```
在上面的代码中,我们将 div 元素的 display 属性设置为 inline-block,从而使它以行内块元素的形式显示。这样 label 和 input 元素就可以在同一行显示了。同时,我们也将 input 元素的 display 属性设置为 inline-block,使其与 label 元素在同一行显示。
相关问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" href="1.css"> <script src="1.js"></script> </head> <body> <div class="login-container"> <h1>登录</h1> <form> <div class="form-group"> <label for="username">用户名</label> <input type="text" id="username" name="username"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" id="password" name="password"> </div> <button type="submit">登录</button> </form> </div> </body> </html> const form = document.querySelector('form'); const usernameInput = document.querySelector('#username'); const passwordInput = document.querySelector('#password'); form.addEventListener('submit', e => { e.preventDefault(); const username = usernameInput.value; const password = passwordInput.value; if (username == '姜文俊' && password == '123') { alert('登录成功!'); window.location.href = '网页设计.html'; } else { alert('用户名或密码错误!'); } }); 修改此代码使登录有反应
您可以尝试在页面中添加一个用于显示登录状态的元素,例如一个 div 标签,然后在登录成功或失败时动态修改该元素的内容。修改后的代码如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="1.css">
<script src="1.js"></script>
</head>
<body>
<div class="login-container">
<h1>登录</h1>
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password">
</div>
<button type="submit">登录</button>
</form>
<div id="login-status"></div> <!-- 新增用于显示登录状态的元素 -->
</div>
<script>
const form = document.querySelector('form');
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');
const loginStatusDiv = document.querySelector('#login-status'); // 获取用于显示登录状态的元素
form.addEventListener('submit', e => {
e.preventDefault();
const username = usernameInput.value;
const password = passwordInput.value;
if (username == '姜文俊' && password == '123') {
loginStatusDiv.textContent = '登录成功!'; // 修改用于显示登录状态的元素的内容
window.location.href = '网页设计.html';
} else {
loginStatusDiv.textContent = '用户名或密码错误!'; // 修改用于显示登录状态的元素的内容
}
});
</script>
</body>
</html>
在用户输入正确的用户名和密码后,页面将显示 "登录成功!" 的提示信息,并自动跳转到名为 "网页设计.html" 的页面;在用户输入错误的用户名或密码时,页面将显示 "用户名或密码错误!" 的提示信息。
<div class="container"> <div class="mb-3"> <label for="name" class="form-label">姓名</label> <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="药物" aria-label="Recipient's username" aria-describedby="button-addon2"> <button class="btn btn-danger" type="button" id="button-addon2" >删除</button> </div> <button type="submit" class="btn btn-primary">提交</button> <button type="submit" class="btn btn-success">增加</button> </div> 如何动态增加一模一样药物输入框
可以使用 JavaScript 实现动态增加药物输入框,具体实现步骤如下:
1. 给“增加”按钮绑定点击事件,点击按钮时动态增加一个药物输入框。
2. 在点击事件中创建一个新的输入框元素,并设置其属性和样式。
3. 将新的输入框元素添加到表单中。
下面是示例代码:
```html
<div class="container">
<div class="mb-3">
<label for="name" class="form-label">姓名</label>
<input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
</div>
<div id="medicines">
<div class="input-group mb-3">
<input type="text" class="form-control medicine-input" placeholder="药物" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-danger delete-button" type="button" id="button-addon2">删除</button>
</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
<button type="button" class="btn btn-success add-button">增加</button>
</div>
<script>
// 获取元素
const medicinesDiv = document.getElementById('medicines');
const addButton = document.querySelector('.add-button');
const deleteButtons = document.querySelectorAll('.delete-button');
// 定义增加输入框的函数
function addMedicineInput() {
// 创建新的输入框元素
const inputGroup = document.createElement('div');
inputGroup.classList.add('input-group', 'mb-3');
const input = document.createElement('input');
input.type = 'text';
input.classList.add('form-control', 'medicine-input');
input.placeholder = '药物';
input.setAttribute('aria-label', 'Recipient\'s username');
input.setAttribute('aria-describedby', 'button-addon2');
const deleteButton = document.createElement('button');
deleteButton.classList.add('btn', 'btn-danger', 'delete-button');
deleteButton.type = 'button';
deleteButton.id = 'button-addon2';
deleteButton.textContent = '删除';
// 绑定删除按钮的点击事件
deleteButton.addEventListener('click', () => {
inputGroup.remove();
});
// 将新的元素添加到表单中
inputGroup.appendChild(input);
inputGroup.appendChild(deleteButton);
medicinesDiv.appendChild(inputGroup);
}
// 绑定增加按钮的点击事件
addButton.addEventListener('click', addMedicineInput);
// 绑定删除按钮的点击事件
deleteButtons.forEach((button) => {
button.addEventListener('click', () => {
button.parentNode.parentNode.remove();
});
});
</script>
```
在上面的代码中,我们将药物输入框包裹在一个 `<div>` 元素中,并为这个 `<div>` 元素设置了一个 id,方便后面操作。我们还定义了一个增加输入框的函数 `addMedicineInput()`,在这个函数中,我们创建了一个新的输入框元素,并将其添加到表单中。当用户点击“增加”按钮时,我们调用这个函数来增加输入框。同时,我们也为每个删除按钮绑定了点击事件,在点击时删除对应的输入框。