目前卡在如何以 50% 宽度(在页脚中)将文本框和按钮对齐在同一行上，任何人都可以给我一些排序或指导或能够为我解决这个问题吗？
[额外的问题，任何进一步的支持或指导将不胜感激，为基本想法提供了线框]
一个是如何在导航栏下方对齐的文本和图片之间放置间距。
在此之下，如何为每个单独的图片和文本框设置细边框。
(对不起，如果我不能问额外的问题)
最佳答案
你可以使用css flexbox来实现
"align the textbox and button on the same line with 50% width"
部分具体添加
form .container {
display: flex;
align-items: center;
justify-content: space-between;
}
到你的css文件。我在下面包含了修改后的元素，以便您可以检查效果。更多关于 CSS flexbox 的信息请访问 here .
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.paragraph {
padding: 5px;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
.footer {
position: relative;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
form .container {
display: flex;
align-items: center;
justify-content: space-between;
}
input[type=text] {
width: 50%;
padding: 15px;
margin: 5px 0 5px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Chollerton Tearooms</title>
</head>
<body>
<ul>
<li><a class="" href="index.html">Home</a></li>
<li><a href="index.html">Find out more</a></li>
<li><a href="index.html">Credits</a></li>
<li><a href="Wireframe.html">Wireframe</a></li>
<li><a href="index.html">Admin</a></li>
</ul>
<div class="main-column">
<div class="paragraph">
<img src="Tearoom.png" alt="Holiday" width="400" height="200" align="left">
<h1> Tearoom</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="column">
<img src="Craftshop.png" alt="Craft" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
<div class="column">
<img src="General%20Store.jpg" alt="Store" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
<div class="column">
<img src="B&B.jpg" alt="Bed and breakfast" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
</div>
<div class="footer"> what i did to ensure that the footer stayed in the correct position was actually setting the position to be absolute, this will stop it from overlapping.</div>
<form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required>
<div class="clearfix">
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</div>
</form>
</body>
</html>至于在图像和文本之间添加空间，您可以简单地对图像应用边距或一些填充。像这样的事情会做:
.desired-img {
margin: 5px;
}
要为段落添加边框，只需使用 css 设置边框样式即可。像这样的事情就可以完成这项工作:
.column {
border: 1px solid lightgrey;
}
希望这对您有所帮助!
关于css - 如何对齐页脚中的文本框和按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53271654/