时间戳

首页 > 解决方案 > 无法使用 CSS/HTML 正确对齐

html - 无法使用 CSS/HTML 正确对齐

问题描述

我是编程和 webdev 的新手，我有点迷路了。我应该为 uni 工作重新创建某个网站页面，但我有点挣扎，我不知道我做错了什么。

好的，最后的问题是：我如何对齐这两个文本？我的意思是，让他们并排。我应该学习什么来学习如何调整它们？

这就是我到目前为止所做 的这就是它应该看起来的样子

可能是一个糟糕的代码，但在这里

HTML 代码：

body {
  font-family: 'Source Sans Pro', sans-serif;
  background-image: url(https://i.imgur.com/qS3SkhD.png);
  background-color: #cccccc;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
}

.call {
  position: absolute;
  right: 400px;
  font-size: 30px;
}

.number {
  position: absolute;
  right: 100px;
  font-size: 30px;
}

.phone {
  position: absolute;
  right: 300px;
  height: 90px;
}

.logo {
  position: relative;
  left: 1px;
  height: 90px;
  margin-inline-start: 100px;
}

.enquire1 h1 {
  font-size: 2rem;
  margin-inline-start: 300px;
  margin-inline-end: 1300px;
  display: block;
  margin-block-start: 4em;
  margin-block-end: 1em;
  margin-top: 2cm;
}

.enquire1 h3 {
  font-size: 1.2rem;
  margin-inline-start: 300px;
  margin-inline-end: 1300px;
  display: block;
  margin-block-start: 4em;
  margin-block-end: 1em;
}

.enquire1 p {
  display: block;
  margin-block-start: 4em;
  margin-block-end: 1em;
  margin-inline-start: 300px;
  margin-inline-end: 1300px;
  margin-bottom: 2cm;
}

.enquire2 {
  text-align: right;
  margin-block-start: 4em;
  margin-block-end: 1em;
  margin-inline-start: 300px;
  margin-inline-end: 600px;
  margin-bottom: 2cm;
}
<body>
  <div class="div1">
    <img class="phone" src="https://i.imgur.com/a347wxT.png" alt="">
    <h3 class="call"> Call us </h3>
    <h3 class="number"> +61 3 9639 0543</h3>
  </div>
  <a href="https://www.lonsdaleinstitute.edu.au/">
    <img class="logo" src="https://www.lonsdaleinstitute.edu.au/wp-content/uploads/2019/10/Asset-12.png" alt="">
  </a>
  <hr>
  <div class="enquire1">
    <h1>The opportunity for a first class education, in a world-class city?</h1>
    <h3>Lansdale Institute in Melbourne, Australia offers all this and more.</h3>
    <p>Your days as a student should be some of the best of your life, filled with great memories of the lifelong friends you made, the fun times you had, and of course the many things you learnt along the way.</p>
    <p>That's why it's important to find a college where a healthy study/life balance is a real focus and your time spent in the classroom is a fullfilling as your time spent outside it.</p>
    <p>And that's where Melbourne's Lansdale Istitute is different</p>
  </div>
  <div class="enquire2">
    <h2>Enquire Now</h2>
    <p>Save $200 on our Enrolment fee</p>
    <form>
      <label for="username">First Name</label>
      <input type="username" placeholder="John" required>
      <div>
        <label for="username">Phone Number</label>
        <input type="username" placeholder="Your Number" required>
      </div>
      <label for="username">Email:</label>
      <input type="email" placeholder="your email" required>
      <div>
        <label for=birthday>Course</label>
        <select name="Course">
          <option value="Course">Choose your Course</option>
          <option value="English">English</option>
          <option value="Healthcare">Healthcare</option>
          <option value="IT">IT</option>
          <option value="Engineering">Engineering</option>
        </select>
      </div>
      <input type="submit">
  </div>
  <hr>
</body>

</html>

谢谢！！！！！！

标签： htmlcss

解决方案

我将这两个部分包装成一个包装类并将其显示为 flexdisplay: flex;

我还摆脱了一堆你的填充和边距，因为它搞砸了。看看我在这里做了什么：

body{
    font-family: 'Source Sans Pro', sans-serif;
    background-image: url(https://i.imgur.com/qS3SkhD.png);
    background-color: #cccccc;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
}
.call{
    position: absolute;
    right: 400px;
    font-size: 30px;
}
.number{
    position: absolute;
    right: 100px;
    font-size: 30px;
}

.phone{
    position: absolute;
    right: 300px;
    height: 90px;
}
.logo{
    position: relative;
    left: 1px;
    height: 90px;
    margin-inline-start: 100px;
}

.enquireW {
  display: flex;
}
<body>
    <div class="div1">
    <img class="phone" src="https://i.imgur.com/a347wxT.png" alt="">
    <h3 class="call"> Call us </h3>
    <h3 class="number"> +61 3 9639 0543</h3>
    </div>
    <a href="https://www.lonsdaleinstitute.edu.au/">
    <img class="logo" src="https://www.lonsdaleinstitute.edu.au/wp-content/uploads/2019/10/Asset-12.png" alt="">
    </a>
<hr>
<div class="enquireW">
<div class="enquire1">
    <h1>The opportunity for a first class education, in a world-class city?</h1>
    <h3>Lansdale Institute in Melbourne, Australia offers all this and more.</h3>
    <p>Your days as a student should be some of the best of your life, filled with great memories of the lifelong friends you made, the fun times you had, and of course the many things you learnt along the way.</p>
    <p>That's why it's important to find a college where a healthy study/life balance is a real focus and your time spent in the classroom is a fullfilling as your time spent outside it.</p>
    <p>And that's where Melbourne's Lansdale Istitute is different</p>
</div>
<div class="enquire2">
    <h2>Enquire Now</h2>
    <p>Save $200 on our Enrolment fee</p>
    <form>
        <label for="username">First Name</label>
        <input type="username" placeholder="John" required>
<div>
    <label for="username">Phone Number</label>
    <input type="username" placeholder="Your Number" required>
</div>
        <label for="username">Email:</label>
        <input type="email" placeholder="your email" required>
<div>
        <label for=birthday>Course</label>
        <select name="Course">
            <option value="Course">Choose your Course</option>
            <option value="English">English</option>
            <option value="Healthcare">Healthcare</option>
            <option value="IT">IT</option>
            <option value="Engineering">Engineering</option>
        </select>
</div>
<input type="submit">
</form>
</div>
<hr>

推荐阅读