html - 字间距问题-6ren

html - 字间距问题

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

26

4

我正在尝试重新创建 Google 的主页，以尝试提高我的基本技能。我正在尝试将字间距应用到导航栏(Gmail 和图片)中的链接，但我无法让它工作。谁能指出我哪里出错了？

我刚刚意识到 list-style-type: none;也没有改变任何东西。

html {
  width: 100%;
  padding: 0;
  margin: 0;
}

.mainSection {
  text-align: center;
  margin-top: 10%;
}

input {
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 1%;
  border: none;
  padding: 10px;
  width: 500px;
  border: 1px solid lightgray;
  outline: none;
  font-size: 20px;
  font-weight: lighter;
  box-shadow: 0px 0px 18px -1px rgba(166, 166, 166, 0.93);
}

button {
  outline: none;
  margin-top: 3%;
  display: inline-block;
  width: 150px;
  height: 35px;
  border: 1px solid #eaeaea;
  outline: none;
  background-color: #f2f2f2;
  color: #636363;
  font-weight: bold;
}

.divider {
  width: 10px;
  display: inline-block;
}

.nav-wrapper {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.nav-wrapper a {
  float: right;
  list-style-type: none;
  word-spacing: 30px;
}

<nav>
  <div class="nav-wrapper">
    <a href="#" class="gmail">Gmail</a>
    <div class="dividerTwo"></div>
    <a href="#" class="images">Images</a>
    <!-- Add sign-in button here -->
    </ul>
  </div>
</nav>
<main>
  <div class="mainSection">
    <img id="googleImg" src="googlemain.png" alt="Google" draggable="false">
    <div id="search">
      <input type="text">
      <button id="Search" href="#">Google Search</button>
      <div class="divider"></div>
      <button id="Lucky" href="#">I'm Feeling Lucky</button>
    </div>
  </div>
</main>

最佳答案

padding-left 可以正常工作。

      .nav-wrapper a {
        float: right;
        order:1;
        text-decoration:none;
        padding-left:10px;
      }

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Google</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

      html {
        width: 100%;
        padding: 0;
        margin: 0;     
      }

      .mainSection {
        text-align: center;
        margin-top: 10%;  
      }   


      input {
        display: block;
        margin-right: auto;
        margin-left: auto;
        margin-top: 1%;
        border: none;
        padding: 10px;
        width: 500px;
        border:1px solid lightgray;
        outline:none;
        font-size: 20px;
        font-weight: lighter;
        box-shadow: 0px 0px 18px -1px rgba(166,166,166,0.93);
      }

      button {
        outline: none;
        margin-top: 3%;
        display: inline-block;
        width: 150px;
        height: 35px;
        border: 1px solid #eaeaea;
        outline: none;
        background-color: #f2f2f2;
        color: #636363;
        font-weight:bold;
      }

      .divider {
        width:10px;
        display: inline-block;
      }

      .nav-wrapper {
        margin: 0;
        padding: 0;
        overflow: hidden; 
      }   

      .nav-wrapper a {
        float: right;
        order:1;
        text-decoration:none;
        padding-left:10px;
      }


    </style>
  </head>

  <body>
    <nav>
      <div class="nav-wrapper">
        <ul>
          <a href="#" class="gmail">Gmail</a>
          <div class="dividerTwo"></div>
          <a href="#" class="images">Images</a>
          <!-- Add sign-in button here -->
        </ul>
      </div>
    </nav>
    <main>
      <div class="mainSection">
        <img id="googleImg" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" draggable="false">
        <div id="search">
          <input type="text">
          <button id="Search" href="#">Google Search</button>
          <div class="divider"></div>
          <button id="Lucky" href="#">I'm Feeling Lucky</button>
        </div>
      </div>
    </main>
  </body>

</html>

关于html - 字间距问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52816834/

26

4

0

文章推荐： java - 如何告诉 Jersey 我的 MessageBodyWriter 在哪里？

文章推荐： c - MSVS 2017 : Pointer null check not behaving as it should

文章推荐： c - 打印编译时保存的文件名

文章推荐： python - XOR 运算符没有给出预期的结果？

c# - Java 字 rune 字到 C# 字 rune 字
我正在维护一些 Java 代码，我目前正在将它们转换为 C#。 Java 代码是这样做的: sendString(somedata + '\000'); 在 C# 中，我正在尝试做同样的事情: sen
c++ - 在编译时定义字符串/字 rune 字
如何确定函数中传递的参数是字符串还是字符(不确定如何正确调用它)文字？我的函数(不正确): void check(const char* str) { // some code here }
使用 boolean 查询的 Java 字符串比较/匹配(例如包含 ("(' 字 1' AND ' 字 2') OR ' 字 3'"))
我真的不知道如何准确地提出这个问题，但我希望标题已经说明了这一点。我正在寻找一种方法(一个框架/库)，它提供了执行 String.contains() 函数的能力，该函数告诉我给定的字符串是否与搜索
haskell - Haskell 中如何解析撇号/字 rune 字？
我正在尝试编写一些读取 Lambda 表达式并输出 beta 缩减版本的东西。 Lambda 的类型如下:\variable -> expression，应用程序的形式为 (表达式) (表达式)。因此
字符*字； printf ("%s"，字)问题
StackOverflow 上的第 1 篇文章，如果我没能把它做好，我深表歉意。我陷入了一个愚蠢的练习，我需要制作一个“刽子手游戏”，我尝试从“.txt”文件中读取单词，然后我得到了我的加密函数，它将
java - 注释元数据的 Groovy 字 rune 字？
我想在 Groovy 中测试我的 Java 自定义注释，但由于字符问题而未能成功。 Groovyc: Expected 'a' to be an inline constant of type cha
javascript - 字 rune 字 asp.net 中的字符太多
当我尝试在单击按钮期间运行 javascript location.href 时，出现以下错误“字 rune 字中的字符过多”。最佳答案这应该使用 OnClientClick相反？您可能还想停
swift - 在 [UInt8] 数组或数据中包含 UTF8 字 rune 字
我想要类似的东西: let a = ["v".utf8[0], 1, 2] 我想到的最接近的是: let a = [0x76, 1, 2] 和 "v".data(using: String.Encod
mysql - MySQL 中的 Unicode(十六进制)字 rune 字
有没有办法在 MySQL 中指定 Unicode 字 rune 字？我想用 Ascii 字符替换 Unicode 字符，如下所示: Update MyTbl Set MyFld = Replace(
c++ - ASCII 和 EBCDIC 系统上的 C/C++ 字 rune 字
阅读 PNG 规范后，我有点惊讶。我读过字 rune 字应该用像 0x41 这样的二进制值进行硬编码，而不是在(程序员友好的)'A' 中。问题似乎是在具有不同底层字符集的不同系统上编译期间字 rune
具有 UTF-8 执行字符集的 C++11 字 rune 字 '\xC4' 标准类型？
考虑一个具有 UTF-8 执行字符集的 C++11 编译器(并且符合要求 char 类型为有符号 8 位字节的 x86-64 ABI) . 字母 Ä(元音变音)具有 0xC4 的 unicode 代码
c++ - 为什么 C11 或 C++11 中没有 ASCII 或 UTF-8 字 rune 字？
为什么即使有 UTF-8 字符串文字，C11 或 C++11 中也没有 UTF-8 字 rune 字？我知道，一般来说，字 rune 字表示单个 ASCII 字符，它与单字节 UTF-8 代码点相同，
pug - Jade 字
我怎样才能用 Jade 做到这一点？ how would I do this 我几乎可以做任何事情，除了引入一个 span 中间句子。最佳答案 h3.blur. how would I do t
java - float 字
这似乎是一个非常简单的问题，但我只是想澄清我的疑问。我正在查看其他开发人员编写的代码。有一些涉及 float 的计算。示例:Float fNotAvlbl = new Float(-99); 他为什
python:if语句后跟一个变量(字)
我想知道第 3 行“if dec:”中的“dec”是什么意思 1 def dec2bin(dec): 2 result='' 3 if dec:
Python正则表达式选择 "not include"字
我试图在字符串中查找不包含任何“a”字符的单词。我写了下面的代码，但它不起作用。我怎么能对正则表达式说“不包括”？我不能用“^”符号表示“不是”吗？ import re string2 = "asfd
python - float 字
这个问题在这里已经有了答案: Is floating point math broken? (31 个答案) Is floating point arbitrary precision availa
java - 字 rune 字错误中的字符太多
我正在创建一个时尚的文本应用程序，但在某些地方出现错误(“字 rune 字中的字符太多”)。我只写了一个字母，但是当我粘贴它时，它会转换成许多这样的字母:“\uD83C\uDD89”，原始字母是“🆉
vba - 如何检查用户在文本框中输入的值是否为 double 字？
我正在尝试检查用户是否在文本框中输入了一个数字值，是否接受了小数位。非常感谢任何帮助。 Private Sub textbox1_AfterUpdate() If IsNumeric(textbox1
memory - 字节、字、长字和长字之间的区别？
我知道一个 Byte 是 8 位，但其他的代表什么？我正在参加一个使用摩托罗拉 68k 架构的汇编类(class)，我对目前的词汇感到困惑。最佳答案如 operator's manual for

首页

博学

6Ren·AI

商城

html - 字间距问题