html - 向右浮动会使其他一切向左移动？-6ren

html - 向右浮动会使其他一切向左移动？

转载作者：太空宇宙更新时间：2023-11-04 12:36:49

我试图通过添加一个将 float 在酒店 Logo 右侧的表单来完成我的元素，但是当我输入时 - float:right; - 它基本上也将酒店标志向左移动，这是我不想要的。我试过 - position:absolute; - 但也没有运气!请找到我所有工作附带的链接，感谢所有回答的人!

http://www.mediafire.com/download/fwvr66dq7ugy6ld/Files.rar

#body {
  width: 1000px;
  margin-right: auto;
  margin-left: auto;
}
#topbotbar {
  border-top-width: 3em;
  border-top-style: solid;
  border-top-color: #21334b;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  border-bottom-width: 3em;
  border-bottom-style: solid;
  border-bottom-color: #21334b;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}
#logo {
  padding-top: 1em;
  padding-bottom: 1em;
  text-align: center;
}
#navtop {
  display: block;
  width: 1000px;
  color: #21334b;
  font-family: tahoma;
  font-size: 1em;
  text-align: center;
  padding-top: 0;
  padding-bottom: -10px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #D8D8D8;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #D8D8D8;
}
#navbot {
  display: block;
  width: 1000px;
  margin-right: auto;
  margin-left: auto;
  color: #D8D8D8;
  font-family: tahoma;
  font-size: 12px;
  text-align: center;
  margin-bottom: -40px;
}
li {
  text-align: center;
  display: inline;
  list-style-type: none;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 14px;
  padding-right: 14px;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #D8D8D8;
}
#banners {
  position: relative;
  padding-top: 1.75em;
}
#banners img {
  position: absolute;
  z-index: 1;
}
#banners img.active {
  z-index: 3;
}
.title {
  font-size: 30px;
  color: #21334b;
  padding-left: 150px;
  margin-top: 9em;
}
.head {
  font-size: 22px;
  color: #a5945d;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #D8D8D8;
  margin-left: 150px;
}
.text {
  color: #21334b;
  font-family: tahoma;
  font-size: 15px;
  text-align: left;
  padding-left: 150px;
  padding-bottom: 1.5em;
}
#topleft {
  position: absolute;
  float: left;
}
#topleft img {
  padding-top: 3em;
  padding-left: 3em;
}
#topright {
  float: right;
}
#topright img {
  position: relative;
  padding-top: 3em;
  padding-right: 4em;
}

<body id="topbotbar">

  <div id="body">

    <div id="topleft">
      <a href="http://www.tripadvisor.ie/Hotel_Review-g186612-d212584-Reviews-Lake_Hotel-Killarney_County_Kerry.html">
        <img src="Images/tripadvisor.png" alt="advertisement" />
      </a>
    </div>

    <form style="float:right;" method="post" enctype="text/plain" action="mailto:Alan.Philpott@students.ittralee.ie" class="text">
      <label>Check-In</label>
      <br>
      <input name="Date" maxlength="7" size="1" placeholder="30 Nov" type="text">
      <input name="Year" maxlength="4" size="1" placeholder="Year" type="text">
    </form>

    <div id="logo">
      <img src="Images/lakehotel.png" alt="Lake Hotel Logo">
    </div>

    <!--Insert Check Available Dates Here-->

    <div id="navtop">
      <nav>
        <ul>
          <li>The Hotel</li>
          <li>Rooms</li>
          <li>Dining</li>
          <li>NewsLetter</li>
          <li style="border-right-width:1px; border-right-style:solid; border-right-color:#D8D8D8;">Gallery</li>
        </ul>
      </nav>
    </div>

    <div id="banners">
      <img src="Images/page1top.jpg" alt="Hotel View" class="active" />
      <img src="Images/page1top2.jpg" alt="Hotel View" />
      <img src="Images/page1top3.jpg" alt="Hotel View" />
    </div>

    <script type="text/javascript">
      $(document).ready(function() {
        setInterval(function() {
          var active = $('#banners .active');
          var next;

          if (active.next().length > 0) {
            next = active.next();
          } else {
            next = $('#banners img:first');
          }

          next.css('z-index', '2');

          active.fadeOut(1500, function() {
            active.css('z-index', '1').show().removeClass('active');

            next.css('z-index', '3').addClass('active');
          });
        }, 5000);
      });
    </script>

    <p class="title">The Hotel</p>
    <p class="head">A FAMILY RUN HOTEL IN THE HEART OF KILLARNEY</p>
    <img style="float:left;" src="Images/offersonline.png" alt="Offers">
    <p class="text">Nestling on the lake of <strong>Lough Lein, Killarney's Lower Lake</strong>, The Lake Hotel enjoys the most magnificent setting with the truly unique backdrop of the mountains, islands, woodlands and the 12th century McCarthy M&oacute;r castle ruins.
      The Lake Hotel is a four star property run by the <strong>Huggard Family</strong> & has been welcoming guests since 1820, so a long tradition of warm Irish hospitality awaits all visitors.
      <br>
      <br>Awaken for breakfast in the elegant dining room, The <span style="color:#a5945d; font-weight:bold;">Castlelough Restaurant </span>. Observe the wild deer stroll across the lawn, unwind over morning coffee in the <span style="color:#a5945d; font-weight:bold;">Lakeside Bistro</span> and
      absorb the peace and tranquillity imposed by the presence of the lakes. Wander down the pathways to the ancient castle ruins and be surrounded by the freshest of air and a landscape that is untouched but admired by visitors over the centuries. As
      the light fades and colours change, enjoy an aperitif in the Devil's Punch Bowl Bar before tasting the finest of Irish food and reflecting on the abundance of natural beauty in this part of the world.</p>
  </div>

  <nav id="navbot">
    <ul>
      <li>The Hotel</li>
      <li>Rooms</li>
      <li>Dining</li>
      <li>NewsLetter</li>
      <li style="border-right-width:1px; border-right-style:solid; border-right-color:#D8D8D8;">Gallery</li>
    </ul>
  </nav>

</body>