Question

图片

http://oi42.tinypic.com/51oew1.jpg

我尝试使用以下CSS和HTML。当浏览器调整大小时，它看起来很好，并且在调整浏览器大小时会加扰。我希望元素在那里，当BROWSER被调整时，必须出现HORIZONTAL SCROLL。对网络编程很新。文本对齐：用于定位中心列的中心不起作用，因为每次在左侧或右侧添加新文本时，它都会重新定位，并且ROW1（文本）和ROW2（按钮）中的中心列元素也不会出现同一条线。也就是说，文本看起来有点正确，按钮有点左。文字对齐在这里不起作用。

CSS：

  @charset "utf-8";
  /* CSS Document */

  body
  {
       background-color:#000;
  }
  .wrapper
  {
      width:70%;
      margin:0 auto;
      padding:2px;
      background-color:#fff;
   }
   .second_row
   {
      padding:2px;
      margin-top:10px;
   }

   .center_container
   {
      width:30%;
      margin:0 auto;    
   }
   .left_container
   {
      width:33%;
      float:left;
   }
   .right_container
   {
      width:33%;
      float:right;
   }
   .topelements 
   {
      margin-top:0px;
      color:#777;
      padding:2px;
   }
   .topelements a:link
   {
      color:#29a3cc;
   }
   .topelements a:active a:hover
   {
      color:#29a3cc;    
   }
   .logo
   {

      overflow:hidden;
   }

HTML code：

  <div class="wrapper"> 
    <span class="topelements float_left" >Mail us: <a href="#">admin@admin.com</a></span>
    <span class="topelements float_right">Left links <a href="#">My xyz</a></span>
    <span class="topelements center_container">Welcome to xyz ! <a href="#">Sign in</a> or <a href="#">Signup</a>.</span>
   </div>
     <div class="wrapper second_row">
       <span class="left_container">Srini</span>
       <span class="right_container">Vas</span>
           <form class="center_container">
              <input type="text" placeholder="Goooooooooooo!" />
              <input type="submit" value="Search" />
           </form>
     </div>
     <div class="wrapper">

Answer 1

一种可行的方法是将包装器宽度设置为固定值（例如800px）。只要这个宽度比您在该包装器中放置的所有内容都长，所有内容都应该按照您的需要工作。当窗口小于包装器的宽度时，浏览器将自动放置一个水平滚动条。

Answer 2

如果你想在中心对齐你的对象，有几种不同的方法。首先，你现在不需要text-align:center;。还有object-position:center;基本上相同，但有一个对象。这种方式不是最好的，但您可以向任何一方添加一定比例的padding，但不建议这样做。最后，有alignment-adjust:central;。这可能不适合您的情况，但只需尝试所有这些，看看它们是否有效。祝好运！

Answer 3

这只是我在CSS中发现的一个小错误，我不知道这是否会有太大帮助。你添加的div不是一个div，而是一个类。例如，如果你想在CSS中设置div的样式，你可以这样做：

#divname {
CSS for div goes here...
}

另一方面，如果你想为一个类添加一点风格，你会这样：

.classname {
CSS for class goes here...
}

如果你想知道每个的区别是什么，答案很简单。 class可以定义多个对象，而divs仅限于一个对象或元素。

包装布局和div问题

3 个答案: