Question

我是CSS的新手，无法解决问题。我的nav css有几个问题。悬停状态与正常状态不一致，最后一个项目被推到一个新行上，而不是在单个条形上等间距。

<DataGrid Style="{DynamicResource EmbedDG}" ItemsSource="{Binding Tags}" >
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="Tag Type" Width="180">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock 
                        Text="{Binding TagType}" 
                        TextWrapping="Wrap"
                        />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>

        <DataGridTemplateColumn Header="Tag Comments" Width="300">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock 
                        Text="{Binding Message}" 
                        TextWrapping="Wrap"
                        />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

Answer 1

您可以使用 Flexbox 以及更少的代码执行此操作：

＆＃13;

/* basic CSS browser reset */
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%;height:100%}

/* can comment out if you decide to use the below approach */
body {
  display: flex;
  justify-content: center; /* horizontal alignment / centering */
  align-items: flex-start; /* prevents the #menu to fill the remaining height of the body */
}

#menu {
  display: flex; /* displays children inline */
  align-items: flex-start;
  width: 50%; /* added */
  margin-top: 10%; /* added */
  /* alternative to center the #menu horizontally, in this case you don't need the styling on the body element
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  */
  list-style-type: none;
  background: radial-gradient(circle, #505050, #3E3E3E);
}

li {
  flex: 1; /* each takes as much width as it can, i.e. each 25% width of the parent */
  border-right: 1px solid #232323;
}

li:last-child {
  border: none;
}

li a {
  display: block;
  text-align: center;
  font: Verdana;
  font-size: 16px;
  color: #EAE0D2;
  padding: 20px 0;
  text-decoration: none;
}

li a:hover {
  background: linear-gradient(#2B2B2B, #232323);
}

.active {
  background: linear-gradient(#3E3E3E, #2B2B2B);
}

＆＃13;

<ul id="menu">
  <li class="active"><a href="#">HOME</a></li>
  <li><a href="#">GALLERY</a></li>
  <li><a href="#">ART</a></li>
  <li><a href="#">CONTACT</a></li>
</ul>

＆＃13;

Answer 2

请原谅我的英语不好。

首先让你的最后一个按钮内联，你必须更改列表项目的盒子模型，并将你的4个按钮设置为25％

li { 
   box-sizing: border-box;
   width:25%; ...

现在你的1px边框不再打破对齐

然后与列表项中的锚点相同，更改框模型并更正宽度

li a { 
      box-sizing: border-box;
      width: 100%; //the whole width of the parent li

现在你的填充不再是问题了

您现在可以删除li a：hover

中的宽度

宽度：83％

一切都应该没问题

jsfiddle

Answer 3

其他方法的另一种方法是计算宽度减去边界，如下所示：

li {
  display: inline-block;
  float: left;
  width: calc( 25% - 3px ); /* 1px per border as specified */
  margin: 0;
  padding: 0;
  border-right: 1px solid #232323;
}

Answer 4

我是CSS的新手

欢迎登机！

要创建多行布局，您可能需要使用flexbox，这很容易。请参阅下面的示例以及有关其工作原理的说明：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: radial-gradient(circle, #505050, #3E3E3E);
  width: 100%;
  display: flex;
}

li {
  display: inline-block;
  flex-basis: 25%;
  border-right: 1px solid #232323;
  text-align: center;
}


/* Remove border from last tab */

li:last-child {
  border: none;
}

li:first-child {
  border: none;
}


/* Setting up the text on the menu */

li a {
  display: inline-block;
  font: Verdana;
  font-size: 16px;
  color: #EAE0D2;
  margin: 0;
  padding: 20px 20px;
  text-decoration: none;
}


/* Change the link color on hover */

li:hover {
  background: linear-gradient(#2B2B2B, #232323);
}


/* Color the active tab */

.active {
  background: linear-gradient(#3E3E3E, #2B2B2B);
  color: #white;
}

<ul id="menu">
  <li class="active"><a href="#">HOME</a></li>
  <li><a href="#">GALLERY</a></li>
  <li><a href="#">ART</a></li>
  <li><a href="#">CONTACT</a></li>
</ul>

等等，什么？

我们首先将容器设置为display: flex
然后，坦克到flex-basis: 25%，我们告诉容器的每个元素（ul li {...}）适合容器总宽度的25％。
我们将text-align: center从ul {...}移至ul li {...}并从width: 25%移除li a {...}，以便列表项内的文字正确对齐。

修改
最后（为了解决悬停问题），我们改变了

li a:hover { background: linear-gradient(#2B2B2B, #232323); border:none; width: 83%; }

到

li:hover { background: linear-gradient(#2B2B2B, #232323); }

Answer 5

将li的宽度更改为24％

width:24%;

RegExp documentation

更新：你的设置宽度为25％，因此链接只是盒子大小的25％。我将它改为80％，工作正常。

CSS新手，导航栏问题

5 个答案:

等等，什么？