0
이제 나는 이것이 매우 단순하고 쉽고 명백하다는 것을 알았지 만, 나는 이것을 시험해보기 위해 이틀 동안 내 머리를 두드렸다. 붐비는 폭풍.부트 스트랩의 한 행에 두 개의리스트 정렬하기
페이지 아래쪽에있는 두 개의 목록에서 링크를 정렬하여 탐색 표시 줄을 만들려고합니다. 나는 부트 스트랩과 폰트를 아이콘으로 사용하고있다. 글꼴이 굉장한 글꼴이 내가 사용하는 글꼴보다 크기가 어긋나있는 것처럼 보입니다.
당신은 (모바일 장치 전체 화면 모드 또는를 통해 가장 눈에 띄는를) codepen를 통해 여기에 내 문제를 볼 수 있습니다:
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://use.fontawesome.com/383177a704.js"></script>
<title>Alex Wilson - Man, Web Designer, Legend</title>
</head>
<body>
<div class="container-fluid">
<div class="row headline">
</div>
<div class="row">
<ul id="list-left">
<li><a href="Home.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a href="work.html">Work</a></li>
</ul>
<ul id="list-right">
<li><a href="https://www.linkedin.com/in/alexwilson33"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="https://github.com/AWilso30"><i class="fa fa-github" aria-hidden="true"></i></a></li>
<li><a href="https://twitter.com/XZISTTT"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="https://www.facebook.com/djcastaway"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="email.com"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS :
다음<http://codepen.io/alexwilson/pen/mAJqWX?editors=1100>
body,
html,
.container-fluid {
height: 100%;
width: 100%;
margin: 0px !important;
padding: 0px !important;
}
.headline {
height: 94%;
background: url(http://www.desktopimages.org/pictures/2014/1025/1/orig_58711.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.row {
margin-right: 0px !important;
}
.row a {
color: black;
}
.row a:link {
text-decoration: none;
}
.row a:visited {
text-decoration: none;
}
.row a:hover {
text-decoration: none;
color: gray;
}
.row a:active {
text-decoration: none;
}
.row ul {
text-align: center;
display: inline-block;
}
.row li {
display: inline-block;
}
#list-left {
font-size: 3vh;
display: inline-block;
width: 49%;
margin: 0;
padding: 0;
}
#list-right {
font-size: 3vh;
display: inline-block;
width: 49%;
margin: 0;
padding: 0;
}
아래쪽 네비게이션 창에서 오른쪽에있는 아이콘이 텍스트 링크가 왼쪽에 있습니다.
모든 것이 응답하기를 바랍니다. 그래서 font-size를 vh로 설정했습니다.
왼쪽 링크를 오른쪽 아이콘과 수직으로 정렬시키는 방법에 대한 아이디어가있는 사람이 있습니까?
왼쪽 링크보다 아이콘 크기를 작게 설정했는데 부트 스트랩에서 xs-6의 두 열을 만들려고했는데 divs에 대한 여백과 여백으로 어지럽 혔습니다. ul 자신들과 더. 지금까지 아무 것도 올바르게 작동하지 않았습니다.
미리 도움을 청하십시오.
당신은 수직 정렬을 시도해 봤어 : 상단을? – user1725382
질문 코드 자체에 관련 코드를 포함시켜야합니다. 코드독은 좋지만 충분하지 않습니다. – vals
Ok. 나는 코드를 포함시켰다. 헤드 업에 감사드립니다. –