リンクのリストを一直線に並べる方法。 CSS

私はしばらくの間、ネットを検索していましたが、希望はありませんでした。 CSSを使用して、これらのリンクを画面中央の一直線に揃えようとしています。しかし、私はそうすることができませんでした...答えは高く評価されます。

順不同リスト（ul）内のリンクを入れて、li要素にdisplay: inline-blockを割り当てます:-)

種類はクリストファーEDITED

<!DOCTYPE html> 
<html> 
<head> 
<title>WikiPeople</title> 

<link rel="stylesheet" type="text/css" href="theme.css"> 

</head> 
<body bgcolor="black"> 

<br /> 
<br /> 
<br /> 

<a href="a-z.html"> A-D </a> 
<a href="a-z.html"> E-H </a> 
<a href="a-z.html"> I-L </a> 
<a href="a-z.html"> M-Q </a> 
<a href="a-z.html"> R-U </a> 
<a href="a-z.html"> V-Z</a> 
</body> 
</html> 



p { 
color: red; 
font-family: Times; 
font-size: 15px; 
} 
/* unvisited link */ 
a:link { 
color: red; 
} 

/* visited link */ 
a:visited { 
color: red; 
} 

/* mouse over link */ 
a:hover { 
    color: hotpink; 
} 

/* selected link */ 
a:active { 
color: blue; 
} 
a:link, a:visited, a:hover, a:active { 
background-color: #f44336; 
color: white; 
padding: 14px 25px; 
text-align: center; 
text-decoration: none; 
display: inline-block; 
border: none; 
outline: none; 
}

出典

2016-05-12 Christoffer Alexander

は考えています。あなたがtext-align: center;を割り当てるDIVにULをラップ：

<div class="x"> 
    <ul> 
    <li><a href="#">link_1</a></li> 
    <li><a href="#">link_2</a></li> 
    <li><a href="#">link_3</a></li> 
    </ul> 
</div>

CSS：

.x { 
    text-align: center; 
} 
ul { 
    width: auto; 
} 
li { 
    display: inline-block; 
}

codepen：http://codepen.io/anon/pen/RaOWrm

出典

2016-05-12 22:31:53 Johannes

それはそれを少し移動ではなく、かなり、画面の中央に。私は国境を作成する必要がありますか？ –

ええ、今私はそれを助けてあなたの時間のおかげで参照してください:) –

申し訳ありません、ちょっと新しい、チックを見ていない：P –

を私はあなたに

HTML

を私の答えを与えます

<body bgcolor="black"> 

<br /> 
<br /> 
<br /> 
<div class="center"> 
<a href="a-z.html"> A-D </a> 
<a href="a-z.html"> E-H </a> 
<a href="a-z.html"> I-L </a> 
<a href="a-z.html"> M-Q </a> 
<a href="a-z.html"> R-U </a> 
<a href="a-z.html"> V-Z</a> 
</div> 
</body>

CSS

p { 
color: red; 
font-family: Times; 
font-size: 15px; 
} 
/* unvisited link */ 
a:link { 
color: red; 
} 

/* visited link */ 
a:visited { 
color: red; 
} 

/* mouse over link */ 
a:hover { 
    color: hotpink; 
} 

/* selected link */ 
a:active { 
color: blue; 
} 
a:link, a:visited, a:hover, a:active { 
background-color: #f44336; 
color: white; 
padding: 14px 25px; 
text-align: center; 
text-decoration: none; 
display: inline-block; 
border: none; 
outline: none; 
} 
.center{ 
    text-align:center; 
}

変更 - 私はdivのへのリンクを追加しました - 私は、中心

DEMO

enter link description here

出典

2016-05-12 22:45:20 Ronald

は、問題を修正という名前のクラスを追加しました、ヨハネスに続くアドバイスして、中央タグ

コードを追加するので、次のようになります。

<center> 
<ul> 
<li><a href="a-z.html"> A-D </a></li> 
<li><a href="e-h.html"> E-H </a></li> 
<li><a href="i-l.html"> I-L </a></li> 
<li><a href="m-q.html"> M-Q </a></li> 
<li><a href="r-u.html"> R-U </a></li> 
<li><a href="v-z.html"> V-Z</a></li> 
</ul> 
</center> 


li { 
display: inline-block; 
}

出典

2016-05-12 22:47:15

リンクのリストを一直線に並べる方法。 CSS

答えて

関連する問題