Question

我对HTML和CSS非常陌生。现在我正在尝试创建标题，您可以看到演示here

基本上我想要来自＆＃34;登录＆＃34;的文字和图标。移到标题的右侧，看起来更像是这样：

header

当您在不同的浏览器中缩小时，我还希望文本和图标位于标题内。

我已尝试将a标记放在右侧，但它会继续在不同浏览器的标题之外。我还尝试为标题中的左侧部分和右侧部分创建div class，但有些文字和图标会在Safari和Chrome中的标题中保持不变。

这两个问题有没有简单的解决方案？

以下是标题的完整代码。

HTML：

<header id="header">
    <span class="free-shipping">Free Shipping</span>
    <span class="free-returns">Free Returns</span>
    <span class="same-day-dispatch">Same-day Dispatch</span>
    <a class="login" href="#" alt="Login">Login</a>
    <a class="create-account" href="#" alt="Create Account">Create Account</a>
    <a class="language-icon" href="#" alt="Choose your language">Language</a>
    <a class="delivery-country-icon" href="#" alt="Choose your delivery country">Delivery Country</a>
</header>

CSS：

/* ------------------ TOP HEADER ------------------ */

    #header {
      border-bottom: 1px solid #ddd;
      background: #f5f5f5;
      height: 45px;
      white-space: nowrap;
      width: 1024px;
    }

    .free-shipping {
      background-image: url("images/shipping.png");
      background-position: left center;
      background-repeat: no-repeat;
      font-size: 11px;
      font-weight: bold;
      padding-left: 23px;
      margin-left: 15px; 
    }
    .free-returns {
      background-image: url("images/returns.png");
      background-position: left center;
      background-repeat: no-repeat;
      font-size: 11px;
      font-weight: bold;
      padding-left: 23px; 
    }
    .same-day-dispatch {
      background-image: url("images/dispatch.png");
      background-position: left center;
      background-repeat: no-repeat;
      font-size: 11px;
      font-weight: bold;
      padding-left: 23px;
    }

    .login {
      font-weight: bold;
      text-decoration: none;
      font-size: 11px;
      padding-right: 8px;
      line-height: 45px;
      color: #202020;
    }

    .login:hover { text-decoration: underline; }

    .create-account {
      font-weight: bold;
      text-decoration: none;
      font-size: 11px;
      padding-right: 8px;
      line-height: 45px;
      color: #d13030;
    }

    .create-account:hover { text-decoration: underline; }

    .language-icon {
      border: 1px solid #ddd;
      color: #202020;
      font-weight: bold;
      padding-right: 8px;
      padding-left: 27px;
      display: inline-block;
      font-size: 11px;  
      width: auto;
      height: 24px;
      margin-top: 10px;
      line-height: 25px;
      text-align: right;
      text-decoration: none;
      border-radius: 4px;        
      background: #f5f5f5 url("images/language-sprite.png") no-repeat 0 0 ;
    }

    .language-icon:hover { background: #fff url("images/language-sprite.png") no-repeat 0 -20px ; color: #d13030; }

    .delivery-country-icon {
      border: 1px solid #ddd;
      color: #202020;
      padding-right: 9px;
      padding-left: 30px;
      font-weight: bold;
      display: inline-block;
      font-size: 11px;  
      height: 24px;
      line-height: 25px;
      text-align: right;
      text-decoration: none;   
      border-radius: 4px;     
      background: #f5f5f5 url("images/delivery-country-sprite.png") no-repeat top left ;
    }

    .delivery-country-icon:hover { background: #fff url("images/delivery-country-sprite.png") no-repeat 0 -20px ; color: #d13030; }

提前谢谢。

Answer 1

在此链接中查看此示例：

http://codepen.io/anon/pen/Gitjl

我使用float来定位元素，一个在左边，另一个在右边。希望它能帮到你。：d

标题：文本/图标定位并在不同浏览器中缩小时将文本/图标保留在标题内

1 个答案: