Question

这似乎是一个糟糕的问题，但我有点像HTML菜鸟。好吧，我正在尝试为我的网站创建一个HTML顶部栏。这是我的代码：

CSS：

* html #top-bar {
  position: absolute;
}

#topbar-inner {
  height: 23px;
  background: #000000;
}

* html #topbar-inner {
  margin-right: 17px;
}
* html #topbar-right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}

HTML：

＆＃13;

#top-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 40px;
  color: white;
}

* html #top-bar {
  position: absolute;
}

#topbar-inner {
  height: 23px;
  background: #000000;
}

* html #topbar-inner {
  margin-right: 17px;
}
* html #topbar-right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}

＆＃13;

<div id="top-bar"> 
  <center><font size="4"><div id="topbar-inner">FREE SHIPPING ON ALL ORDERS OVER $39!</div></font></center>
</div>
<br></br>

＆＃13;

＆＃13; 我尝试在屏幕右侧添加文字，同时在中间放置免费送货物品。每次我添加到我的网站时，文本都不会紧挨着它。如何正确对齐？

感谢

Answer 1

我认为

Here's a JSFiddle可以解决您的问题。

栏中的文字居中对齐，右侧有一些文字，右对齐。

更重要的是，它使用的是类而不是ID（正如我在上面的评论中提到的那样）。

CSS如下（我还引用了小提琴中的normalise.css来重置浏览器怪癖）。

.top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    line-height: 23px; /* Vertically align the text middle */
    background: #000;
    color: #FFF;
    text-align: center; /* Instead of <centre> */
    text-transform: uppercase; /* Capitalise the text in CSS */
}

.top-bar p {
    margin: 0;
}

.top-bar__right {
    position: absolute;
    right: 0;
    background: red; /* Just to make it stand out in this example */
    top: 0;
}

HTML如下：

<div class="top-bar">
    <p class="top-bar__middle">Free shipping on all orders over $39!</p>
    <p class="top-bar__right">This is some text.</p>
</div>

Answer 2

这样的东西？

＆＃13;

#top-bar {
  position: absolute;
  width:100%;
  top:0;
  left:0;
}

#topbar-inner {
  height: 23px;
  background: blue;
  float:left;
   width:50%;
}

#topbar-inner {
 
  float:left;
}
#topbar-right {
position: relative;
float:right;
width: 300px;
background-color: #fff555;
 width:50%;
}

＆＃13;

<div id="top-bar"> 
<center>
  <div id="topbar-inner">FREE SHIPPING ON ALL ORDERS OVER $39!</div> 
  <div id="topbar-right">this is for the right topbar</div>   
</center>
</div>

＆＃13;

无法在网站上创建标题？

2 个答案: