0

图片

我使用以下 CSS 和 HTML 进行了尝试。当浏览器全宽时看起来很好，而在调整浏览器大小时它看起来很乱。我希望元素在那里，并且在调整浏览器大小时必须出现水平滚动。对网络编程来说很新。Text-align:center 用于定位中心列不起作用，因为每次在左侧或右侧添加新文本时，它都会重新定位，并且 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 代码：

  <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">
4

3 回答 3

1

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

于 2013-04-28T08:03:13.343 回答
1

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

于 2013-04-28T07:44:52.837 回答
0

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

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

另一方面，如果你想给一个类添加一点样式，你可以这样：

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

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

于 2013-04-28T07:43:41.403 回答