如何在元素中排列html元素？

时间：2019-03-10 23:49:12

标签： html css line

我有一个导航栏，带有指向其他页面的超链接。我决定对每个超链接使用不同的划分，因为我无法让它们分散开。当我在浏览器中执行此操作时，两个超链接（均为正确的超链接）略低于其他超链接。我不知道这是因为我的Mac，还是代码错误。有人可以告诉我如何确保所有超链接均匀分布在两行中吗？

.navbar {
  padding: 15px;
  font-size: 28pt;
  background-color: #F64C72;
  position: relative;
  top: 20px;
  text-align: center;
  margin: auto;
  font-size: 17pt;
}

.connectp1 {
  text-align: left;
}

.connectp2 {
  text-align: center;
}

.connectp3 {
  text-align: right;
}

.connectp4 {
  text-align: left;
}

.connectp5 {
  text-align: center;
}

.connectp6 {
  text-align: right;
}
<div class="navbar">
  <div>
    <div class="connectp1">
      <a href="cpage1.html">First Peoples </a>
    </div>
    <div class="connectp2">
      <a href="cpage2.html">Natives And Newcomers</a>
    </div>

    <div class="connectp3">
      <a href="cpage3.html">Provincial Centre</a>
    </div>


  </div>
  <div>
    <div class="connectp4">
      <a href="cpage4.html">Industrializing City</a>
    </div>

    <div class="connectp5">
      <a href="cpage5.html">Wars And Crises</a>
    </div>

    <div class="connectp6">
      <a href="cpage6.html">The Modern Metropolis</a>
    </div>

  </div>
</div>

5 个答案:

答案 0 :(得分：1)

您不需要额外的层即可展开。诸如<a>之类的内联元素更适合此类菜单，因此只需保持简单即可。下面的代码仅在需要时才会分成两行。

.navbar {
  padding: 15px;
  background-color: #F64C72;
  text-align: center;
  font-size: 17px;
}
.menu {
  display: inline-block;
  margin: 10px auto;
  white-space: nowrap;
} 
nav a {
  display: inline-block;
  padding: 5px;
  white-space: normal;
  vertical-align: top;
}
<nav class="navbar">
  <div class="menu">
      <a href="cpage1.html">First Peoples </a>
      <a href="cpage2.html">Natives And Newcomers</a>

      <a href="cpage3.html">Provincial Centre</a>
</div>
  <div class="menu">
      <a href="cpage4.html">Industrializing City</a>

      <a href="cpage5.html">Wars And Crises</a>

      <a href="cpage6.html">The Modern Metropolis</a>
  </div>
  </nav>

但是，我建议您考虑对设计进行一些改进，以使菜单看起来更整洁。

答案 1 :(得分：0)

这似乎是使用flexbox设置justify-content的绝佳机会。我们可以只使用plot_ly来保存所有的导航，然后使用int main(void){ // Declare variables here: char ch; struct Name FullName = { {'\0'} }; struct Address AddressInfo = { 0, '\0', 0, '\0', '\0' }; struct Numbers PhoneInfo = { {'\0'} }; // Display the title printf("Contact Management System\n"); printf("-------------------------\n"); // Contact Name Input: printf("Please enter the contact’s first name: "); scanf("%s", &FullName.firstName); printf("Do you want to enter a middle initial(s)? (y or n): "); scanf(" %c", &ch); if (ch == 'y') { printf("Please enter the contact’s middle initial(s): "); scanf(" %s", FullName.middleInitial); } printf("Please enter the contact’s last name: "); scanf(" %s", &FullName.lastName); // Contact Address Input: printf("Please enter the contact’s street number: "); scanf("%d", &AddressInfo.streetNumber); 来保存每一行，然后直接链接。

Contact Management System ------------------------- Please enter the contactÆs first name: *Artem* Do you want to enter a middle initial(s)? (y or n): *y* Please enter the contactÆs middle initial(s): *L. A.* Please enter the contactÆs last name: Please enter the contactÆs street number: 处理实例中div元素的分布，而设置div则确定flexbox元素的间距。 

a
justify-content: space-between

在IE 10中，您需要添加a作为前缀，如果您需要支持IE 9和更早版本，则它根本无法与旧版IE一起使用。参见：https://css-tricks.com/almanac/properties/j/justify-content/

答案 2 :(得分：0)

最好使用带有列表项(ul)的无序列表(<li>)，然后将列表显示为表格行/表格单元格，如下面的代码片段，并垂直对齐到顶部。顺便说一句，您当前的CSS包含重复项，无需创建2个不同的类即可将文本右对齐（例如）

随意调整代码段（我减小了巨大的字体大小！-以便可以在代码段中看到调整内容）

* {
  margin: 0px;
  padding: 0px;
}

nav {
  margin: auto;
  top: 20px;
  padding: 20px;
  font-size: 13pt;
  background-color: #F64C72;
  text-align: center;
}

nav ul {
  margin: 0px;
  list-style-type: none;
  vertical-align: top;
  display: table-row;
}

ul li {
  display:table-cell;
}

ul li a {
  text-decoration: none;

}
<nav>
  <ul>
    <li><a href="cpage1.html">First Peoples </a></li>
    <li><a href="cpage2.html">Natives And Newcomers</a></li>
    <li>
      <a href="cpage3.html">Provincial Centre</a>
    </li>
  </ul>
  <ul>
    <li class=""><a href="cpage4.html">Industrializing City</a>
    </li>

    <li class="">
      <a href="cpage5.html">Wars And Crises</a>
    </li>

    <li class="">
      <a href="cpage6.html">The Modern Metropolis</a>
    </li>
  </ul>
</nav>

答案 3 :(得分：0)

尽可能使用HTML5语义元素。在您的情况下，nav元素是完成此工作的合适工具。 MDN shows：

nav {
    border-bottom: 1px solid black;
}

.crumbs ol {
    list-style-type: none;
    padding-left: 0;
}

.crumb {
    display: inline-block;
}
<nav class="crumbs">
    <ol>
        <li class="crumb"><a href="bikes">Acme</a></li>
        <li class="crumb"><a href="bikes/bmx">Foo</a></li>
        <li class="crumb"><a href="bikes/bar">Bar</a></li>
    </ol>
</nav>

<h1>Jump Bike 3000</h1>
<p>This BMX bike is a solid step into the pro world. It looks as legit as it rides and is built to polish your skills.</p>

答案 4 :(得分：-1)

<div>元素是块级元素，因此默认情况下占用“行”的100%中的width。虽然您可以通过简单地将其display更改为inline-block来解决此问题，但我建议您将其替换为<span>标签（默认情况下为内联阻止）：

.navbar {
  padding: 15px;
  font-size: 28pt;
  background-color: #F64C72;
  position: relative;
  top: 20px;
  text-align: center;
  margin: auto;
  font-size: 17pt;
}

.connectp1 {
  text-align: left;
}

.connectp2 {
  text-align: center;
}

.connectp3 {
  text-align: right;
}

.connectp4 {
  text-align: left;
}

.connectp5 {
  text-align: center;
}

.connectp6 {
  text-align: right;
}
<div class="navbar">
  <div>
    <span class="connectp1">
      <a href="cpage1.html">First Peoples </a>
    </span>
    <span class="connectp2">
      <a href="cpage2.html">Natives And Newcomers</a>
    </span>
    <span class="connectp3">
      <a href="cpage3.html">Provincial Centre</a>
    </span>
  </div>
  <div>
    <span class="connectp4">
      <a href="cpage4.html">Industrializing City</a>
    </span>
    <span class="connectp5">
      <a href="cpage5.html">Wars And Crises</a>
    </span>
    <span class="connectp6">
      <a href="cpage6.html">The Modern Metropolis</a>
    </span>
  </div>
</div>

请注意，您也可能会寻找float: left和float: right  而不是text-align: left和text-align: right，以便分离出您的元素。尽管不需要float: center，但没有。您还可以在这方面组合选择器以节省空间，如下所示：

.navbar {
  padding: 15px;
  font-size: 28pt;
  background-color: #F64C72;
  position: relative;
  top: 20px;
  text-align: center;
  margin: auto;
  font-size: 17pt;
}

.connectp1, .connectp4 {
  float: left;
}

.connectp3, .connectp6  {
  float: right;
}
<div class="navbar">
  <div>
    <span class="connectp1">
      <a href="cpage1.html">First Peoples </a>
    </span>
    <span class="connectp2">
      <a href="cpage2.html">Natives And Newcomers</a>
    </span>
    <span class="connectp3">
      <a href="cpage3.html">Provincial Centre</a>
    </span>
  </div>
  <div>
    <span class="connectp4">
      <a href="cpage4.html">Industrializing City</a>
    </span>
    <span class="connectp5">
      <a href="cpage5.html">Wars And Crises</a>
    </span>
    <span class="connectp6">
      <a href="cpage6.html">The Modern Metropolis</a>
    </span>
  </div>
</div>

相关问题
最新问题