정렬 문제..
본문
저 글쓴이 란에 있는 내용만 유독 , 날짜 조회수와는 다르게 왼쪽으로 치중되어있습니다 ㅠㅠ
제가 사진 상에 움직인것처럼 글쓴이 밑으로 이름이 그대로 오고 계급이미지만 왼쪽에 붙은 느낌으로 바꾸고싶습니다.. 실명제 홈페이지라 어차피 이름도 3글자 밖에 안될겁니다 ㅠㅠ...
아래는 게시판 리스트 php 인데 어딜 만져야할지 몰라 다 가져왔습니다
<?php if (!defined('_GNUBOARD_')) exit;
add_stylesheet('<link rel="stylesheet" href="../../../plugins/sly/tab_scroll_category.css" type="text/css" media="screen">',0);
add_stylesheet('<link rel="stylesheet" href="../../../plugins/sweetalert/sweetalert.min.css" type="text/css" media="screen">',0);
?>
<style>
.board-list .eyoom-form .radio i, .board-list .eyoom-form .checkbox i {top:2px}
.board-list .table-list-eb .table thead > tr > th {border-bottom:1px solid #000;text-align:center;padding:10px 5px}
.board-list .table-list-eb .table tbody > tr > td {border-top:1px solid #ededed;padding:7px 5px}
.board-list .table-list-eb thead {border-top:2px solid #000;border-bottom:1px solid #000}
.board-list .table-list-eb th {color:#000;font-weight:bold;white-space:nowrap;font-size:13px}
.board-list .table-list-eb .td-comment {display:inline-block;white-space:nowrap;vertical-align:baseline;text-align:center;min-width:35px;padding:2px;font-size:10px;line-height:1;color:#fff;background-color:#757575;margin-right:5px}
.board-list .table-list-eb .td-comment .cnt_cmt {margin:0;font-weight:normal}
.board-list .table-list-eb .td-subject {width:300px}
.board-list .table-list-eb .td-subject a {display:block;color:#000}
.board-list .table-list-eb .td-subject a:hover {color:#005cff;text-decoration:underline}
.board-list .table-list-eb .td-subject .fa {color:#FF2900}
.board-list .table-list-eb .td-photo {display:inline-block;width:26px;height:26px;margin-right:2px;border:1px solid #e5e5e5;padding:1px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:50% !important;-moz-border-radius:50% !important;border-radius:50% !important}
.board-list .table-list-eb .td-photo img {width:100%;height:auto;-webkit-border-radius:50% !important;-moz-border-radius:50% !important;border-radius:50% !important}
.board-list .table-list-eb .td-photo .td-user-icon {width:22px;height:22px;font-size:14px;line-height:22px;text-align:center;background:#959595;color:#fff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;white-space:nowrap;vertical-align:baseline;-webkit-border-radius:50% !important;-moz-border-radius:50% !important;border-radius:50% !important}
.board-list .table-list-eb .td-lv-icon {display:inline-block;margin-right:2px}
.board-list .table-list-eb .td-star-icon {display:inline-block;margin-right:2px;margin-bottom:-4px}
.board-list .table-list-eb .td-name b {font-weight:normal;font-size:12px}
.board-list .table-list-eb .td-date {text-align:center;color:#959595;font-size:12px}
.board-list .table-list-eb .td-num {text-align:center;font-size:12px}
.board-list .table-list-eb .td-mobile td {border-top:1px solid #f0f0f0;padding:3px 5px !important;font-size:11px;color:#959595;background:#fcfcfc}
.board-list .table-list-eb .td-mobile td span {margin-right:5px}
.board-list .table-list-eb .td-mobile td .td-mobile-name b {font-weight:normal}
.board-list .star-ratings-list {width:50px;margin:0 auto}
.board-list .star-ratings-list li {padding:0;float:left;margin-right:0}
.board-list .star-ratings-list li .rating {color:#a5a5a5;font-size:10px;line-height:normal}
.board-list .star-ratings-list li .rating-selected {color:#FF2900;font-size:10px}
.board-list .bo_current {color:#FF2900}
.board-list .board-notice {background:#FFF8EC}
.board-list .board-notice .td-subject a {color:#AA3510}
.board-list .board-notice .td-subject a:hover {color:#AA3510}
.board-list .board-btn-adm li {float:left;margin-right:5px}
@media (max-width:1199px) {
.board-list .table-list-eb .td-subject {width:240px}
}
@media (max-width:767px) {
.board-list .table-list-eb .table tbody > tr > td.td-subj-wrap {padding:15px 5px}
.board-list .table-list-eb .td-subject {width:250px}
.board-list .table-list-eb .td-subject .subject {font-size:13px;font-weight:bold}
}
</style>
<div class="board-list">
<!--{* 게시판 페이지 정보 및 버튼 시작 *}-->
<div class="board-info margin-bottom-20">
<div class="pull-left margin-top-5 font-size-12 color-grey">
<u>전체 {=number_format(_total_count)} 건 - {_page} 페이지</u>
</div>
<!--{? _write_href}-->
<div class="pull-right">
<!--{?_admin_href}-->
<a href="{_admin_href}" class="btn-e btn-e-dark rounded" type="button">관리자</a>
<!--{/}-->
<!--{?_eyoom_href}-->
<a href="{_eyoom_href}" class="btn-e btn-e-dark rounded" type="button">이윰설정</a>
<!--{/}-->
<!--{?_extend_href}-->
<a href="{_extend_href}" class="btn-e btn-e-dark rounded" type="button">확장필드 ({=number_format(board.bo_ex_cnt)})</a>
<!--{/}-->
<!--{?_write_href}-->
<a href="{_write_href}" class="btn-e btn-e-red rounded" type="button">글쓰기</a>
<!--{/}-->
</div>
<!--{/}-->
<div class="clearfix"></div>
</div>
<!--{* 게시판 페이지 정보 및 버튼 끝 *}-->
<!--{* Hot 게시글 *}-->
<!--{? eyoom_board.bo_use_hotgul == 1}-->
<div class="margin-bottom-30">
{latest->latest_hot('basic', 'count=5||cut_subject=30||photo=y')}
</div>
<!--{/}-->
<!--{* 게시판 카테고리 시작 *}-->
<!--{?_is_category}-->
<div class="tab-scroll-category">
<div class="scrollbar">
<div class="handle">
<div class="mousearea"></div>
</div>
</div>
<div id="tab-category">
<div class="category-list">
<span {? !_decode_sca}class="active"{/}><a href="{_category_href}">전체분류 ({=number_format(board.bo_count_write)})</a></span>
<!--{@ _bocate}-->
<span {? _decode_sca == .ca_name}class="active"{/}><a href="{_category_href}&sca={.ca_sca}">{.ca_name} ({.ca_count})</a></span>
<!--{/}-->
<span class="fake-span"></span>
</div>
<div class="controls">
<button class="btn prev"><i class="fa fa-caret-left"></i></button>
<button class="btn next"><i class="fa fa-caret-right"></i></button>
</div>
</div>
<div class="tab-category-divider"></div>
</div>
<!--{/}-->
<!--{* 게시판 카테고리 끝 *}-->
<!--{? _is_admin}-->
<form name="fboardlist" id="fboardlist" action="./board_list_update.php" onsubmit="return fboardlist_submit(this);" method="post" class="eyoom-form">
<input type="hidden" name="bo_table" value="{_bo_table}">
<input type="hidden" name="sfl" value="{_sfl}">
<input type="hidden" name="stx" value="{_stx}">
<input type="hidden" name="spt" value="{_spt}">
<input type="hidden" name="sca" value="{_sca}">
<input type="hidden" name="page" value="{_page}">
<input type="hidden" name="sw" value="">
<!--{/}-->
<div class="table-list-eb margin-bottom-20">
<div class="board-list-body">
<table class="table table-hover">
<thead>
<tr>
<th class="hidden-md hidden-sm">번호</th>
<!--{? _is_checkbox}-->
<th>
<label for="chkall" class="sound_only">현재 페이지 게시물 전체</label>
<label class="checkbox">
<input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);"><i></i>
</label>
</th>
<!--{/}-->
<th>제목</th>
<th class="hidden-xs">글쓴이</th>
<th class="hidden-xs"><!--{=subject_sort_link('wr_datetime', _qstr2, 1)}-->날짜</a></th>
<th class="hidden-xs"><!--{=subject_sort_link('wr_hit', _qstr2, 1)}-->조회수</a></th>
<!--{?_is_good}-->
<th class="hidden-xs"><!--{=subject_sort_link('wr_good', _qstr2, 1)}-->추천</a></th>
<!--{/}-->
<!--{?_is_nogood}-->
<th class="hidden-xs"><!--{=subject_sort_link('wr_nogood', _qstr2, 1)}-->비추</a></th>
<!--{/}-->
<!--{? eyoom_board.bo_use_rating == '1' && eyoom_board.bo_use_rating_list == '1'}-->
<th class="hidden-xs">별점</th>
<!--{/}-->
</tr>
</thead>
<tbody>
<!--{@ list}-->
<tr class="{? .is_notice}board-notice{/}">
<td class="td-num hidden-md hidden-sm">
<!--{? .is_notice}-->
<strong class="color-red">공지</strong>
<!--{: _wr_id == .wr_id}-->
<strong class="color-red">열람</strong>
<!--{:}-->
{=number_format(.num)}
<!--{/}-->
</td>
<!--{? _is_checkbox}-->
<td>
<label for="chk_wr_id_{.key_}" class="sound_only">{.subject}</label>
<label class="checkbox">
<input type="checkbox" name="chk_wr_id[]" value="{.wr_id}" id="chk_wr_id_{.key_}"><i></i>
</label>
</td>
<!--{/}-->
<td class="td-subj-wrap">
<div class="td-subject ellipsis">
<!--{? .icon_reply}-->
<i class="fa fa-reply fa-rotate-180" style="margin-left:{.reply}px;"></i>
<!--{/}-->
<a href="{.href}">
<!--{? _is_category && .ca_name}-->
<span class="color-grey margin-right-5">[{.ca_name}]</span>
<!--{/}-->
<!--{?.icon_new}-->
<i class="fa fa-circle margin-right-5"></i>
<!--{/}-->
<!--{?.icon_secret}-->
<i class="fa fa-lock margin-right-5"></i>
<!--{/}-->
<!--{? .is_notice}-->
<strong>{.subject}</strong>
<!--{: _wr_id == .wr_id}-->
<strong>{.subject}</strong>
<!--{:}-->
<span class="subject">{.subject}</span>
<!--{/}-->
<!--{? .comment_cnt}-->
<span class="sound_only">댓글</span> [{.comment_cnt}]<span class="sound_only">개</span>
<!--{/}-->
</a>
</div>
</td>
<td class="td-name hidden-xs">
<!--{? eyoom_board.bo_use_profile_photo == 1}-->
<span class="td-photo">
<!--{? .mb_photo}-->
{.mb_photo}
<!--{:}-->
<span class="td-user-icon"><i class="fa fa-user"></i></span>
<!--{/}-->
</span>
<!--{/}-->
<!--{? .gnu_icon}-->
<span class="td-lv-icon"><img src="{.gnu_icon}" align="absmiddle"></span>
<!--{/}-->
<!--{? .eyoom_icon}-->
<span class="td-lv-icon"><img src="{.eyoom_icon}" align="absmiddle"></span>
<!--{/}-->
<span class="td-name-in">{=eb_nameview('basic', .mb_id, .wr_name, .wr_email, .homepage)}</span>
</td>
<td class="td-date hidden-xs">
<!--{? eyoom_board.bo_sel_date_type == '1'}-->
{eb->date_time('Y.m.d',.wr_datetime)}
<!--{: eyoom_board.bo_sel_date_type == '2'}-->
{eb->date_format('Y.m.d',.wr_datetime)}
<!--{/}-->
</td>
<td class="td-num hidden-xs">{=number_format(.wr_hit)}</td>
<!--{?_is_good}-->
<td class="td-num hidden-xs color-green">{=number_format(.wr_good)}</td>
<!--{/}-->
<!--{?_is_nogood}-->
<td class="td-num hidden-xs color-yellow">{=number_format(.wr_nogood)}</td>
<!--{/}-->
<!--{? eyoom_board.bo_use_rating == '1' && eyoom_board.bo_use_rating_list == '1'}-->
<td class="hidden-xs">
<ul class="list-unstyled star-ratings-list">
<li><i class="rating{? .star > 0}-selected fa fa-star{:} fa fa-star-o{/}"></i></li>
<li><i class="rating{? .star > 1}-selected fa fa-star{:} fa fa-star-o{/}"></i></li>
<li><i class="rating{? .star > 2}-selected fa fa-star{:} fa fa-star-o{/}"></i></li>
<li><i class="rating{? .star > 3}-selected fa fa-star{:} fa fa-star-o{/}"></i></li>
<li><i class="rating{? .star > 4}-selected fa fa-star{:} fa fa-star-o{/}"></i></li>
</ul>
</td>
<!--{/}-->
</tr>
<tr class="td-mobile visible-xs"><!--{* 767px 이하에서만 보임 *}-->
<td colspan="{colspan}">
<!--{? eyoom_board.bo_use_profile_photo == 1}-->
<span class="td-photo">
<!--{? .mb_photo}-->{.mb_photo}<!--{:}--><span class="td-user-icon"><i class="fa fa-user"></i></span><!--{/}-->
</span>
<!--{/}-->
<!--{? .gnu_icon}-->
<span class="td-lv-icon"><img src="{.gnu_icon}" align="absmiddle"></span>
<!--{/}-->
<!--{? .eyoom_icon}-->
<span class="td-lv-icon"><img src="{.eyoom_icon}" align="absmiddle"></span>
<!--{/}-->
<span class="td-mobile-name">{=eb_nameview('basic', .mb_id, .wr_name, .wr_email, .homepage)}</span>
<!--{? eyoom_board.bo_sel_date_type == '1'}-->
<span><i class="fa fa-clock-o"></i> {eb->date_time('Y.m.d',.wr_datetime)}</span>
<!--{: eyoom_board.bo_sel_date_type == '2'}-->
<span><i class="fa fa-clock-o"></i> {eb->date_format('Y.m.d',.wr_datetime)}</span>
<!--{/}-->
<span><i class="fa fa-eye"></i> {=number_format(.wr_hit)}</span>
<!--{?_is_good}-->
<span><i class="fa fa-thumbs-up"></i> {=number_format(.wr_good)}</span>
<!--{/}-->
<!--{?_is_nogood}-->
<span><i class="fa fa-thumbs-down"></i> {=number_format(.wr_nogood)}</span>
<!--{/}-->
</td>
</tr>
<!--{:}-->
<tr>
<td colspan="{colspan}" class="text-center"><span class="color-grey"><i class="fa fa-exclamation-circle"></i> 게시물이 없습니다.</span></td>
</tr>
<!--{/}-->
</tbody>
</table>
</div>
</div>
<div class="board-list-footer">
<div class="pull-left">
<!--{? _is_checkbox}-->
<ul class="list-unstyled board-btn-adm pull-left">
<li><button class="btn-e btn-e-default rounded" type="submit" name="btn_submit" value="선택삭제" onclick="document.pressed=this.value">선택삭제</button></li>
<li><button class="btn-e btn-e-default rounded" type="submit" name="btn_submit" value="선택복사" onclick="document.pressed=this.value">선택복사</button></li>
<li><button class="btn-e btn-e-default rounded" type="submit" name="btn_submit" value="선택이동" onclick="document.pressed=this.value">선택이동</button></li>
</ul>
<!--{/}-->
<span class="pull-left">
<!--{?_rss_href}-->
<a href="{_rss_href}" class="btn-e btn-e-yellow rounded" type="button"><i class="fa fa-rss"></i></a>
<!--{/}-->
<a class="btn-e btn-e-dark rounded" type="button" data-toggle="modal" data-target=".search-modal"><i class="fa fa-search"></i></a>
</span>
</div>
<div class="pull-right">
<!--{? _list_href || _write_href}-->
<ul class="list-unstyled">
<!--{? _write_href}-->
<li><a href="{_write_href}" class="btn-e btn-e-red rounded" type="button">글쓰기</a></li>
<!--{/}-->
</ul>
<!--{/}-->
</div>
<div class="clearfix"></div>
</div>
<!--{? _is_admin}-->
</form>
<!--{/}-->
</div>
<!--{* 게시판 검색 모달 시작 *}-->
<div class="modal fade search-modal" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h5 class="modal-title"><i class="fa fa-search color-grey"></i> <strong>{board.bo_subject} 검색</strong></h5>
</div>
<div class="modal-body">
<!--{* 게시판 검색 시작 *}-->
<fieldset id="bo_sch" class="eyoom-form">
<!--legend>게시물 검색</legend-->
<form name="fsearch" method="get">
<input type="hidden" name="bo_table" value="{_bo_table}">
<input type="hidden" name="sca" value="{_sca}">
<input type="hidden" name="sop" value="and">
<label for="sfl" class="sound_only">검색대상</label>
<section class="margin-top-10">
<label class="select">
<select name="sfl" id="sfl" class="form-control">
<option value="wr_subject"{=get_selected(_sfl, 'wr_subject', true)}>제목</option>
<option value="wr_content"{=get_selected(_sfl, 'wr_content')}>내용</option>
<option value="wr_subject||wr_content"{=get_selected(_sfl, 'wr_subject||wr_content')}>제목+내용</option>
<option value="mb_id,1"{=get_selected(_sfl, 'mb_id,1')}>회원아이디</option>
<option value="mb_id,0"{=get_selected(_sfl, 'mb_id,0')}>회원아이디(댓글)</option>
<option value="wr_name,1"{=get_selected(_sfl, 'wr_name,1')}>이름</option>
<option value="wr_name,0"{=get_selected(_sfl, 'wr_name,0')}>이름(댓글)</option>
<!--{@_ex_sfl}-->
<option value="{.key_}"{=get_selected(_sfl, .key_, true)}>{.value_}</option>
<!--{/}-->
</select>
<i></i>
</label>
</section>
<section>
<label for="stx" class="sound_only">검색어<strong class="sound_only"> 필수</strong></label>
<div class="input input-button">
<input type="text" name="stx" value="{=stripslashes(_stx)}" required id="stx">
<div class="button"><input type="submit" value="검색">검색</div>
</div>
</section>
</form>
</fieldset>
<!--{* 게시판 검색 끝 *}-->
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn-e btn-e-lg btn-e-dark rounded" type="button"><i class="fa fa-close"></i> 닫기</button>
</div>
</div>
</div>
</div>
<iframe name="photoframe" id="photoframe" style="display:none;"></iframe>
<!--{* 게시판 검색 모달 끝 *}-->
<!--{?_is_checkbox}-->
<noscript>
<p>자바스크립트를 사용하지 않는 경우<br>별도의 확인 절차 없이 바로 선택삭제 처리하므로 주의하시기 바랍니다.</p>
</noscript>
<!--{/}-->
<!--{* 페이지 *}-->
{=eb_paging('basic')}
<script src="../../../plugins/sweetalert/sweetalert.min.js"></script>
<!--{?_is_category}-->
<script src="../../../plugins/sly/vendor_plugins.min.js"></script>
<script src="../../../plugins/sly/sly.min.js"></script>
<script>
$(function() {
var $frame = $('#tab-category');
var $wrap = $frame.parent();
$frame.sly({
horizontal: 1,
itemNav: 'centered',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
var tabWidth = $('#tab-category').width();
var categoryWidth = $('.category-list').width();
if (tabWidth < categoryWidth) {
$('.controls').show();
}
});
</script>
<!--{/}-->
<!--{?_is_checkbox}-->
<script>
function all_checked(sw) {
var f = document.fboardlist;
for (var i=0; i<f.length; i++) {
if (f.elements[i].name == "chk_wr_id[]")
f.elements[i].checked = sw;
}
}
function fboardlist_submit(f) {
var chk_count = 0;
for (var i=0; i<f.length; i++) {
if (f.elements[i].name == "chk_wr_id[]" && f.elements[i].checked)
chk_count++;
}
if (!chk_count) {
swal({
html: true,
title: "Oops...",
text: "<strong class='color-red'>" + document.pressed + "</strong> 할 게시물을 하나 이상 선택하세요.",
confirmButtonColor: "#FF2900",
type: "error",
confirmButtonText: "확인"
});
return false;
}
if(document.pressed == "선택복사") {
select_copy("copy");
return;
}
if(document.pressed == "선택이동") {
select_copy("move");
return;
}
if(document.pressed == "선택삭제") {
if (!confirm("선택한 게시물을 정말 삭제하시겠습니까?\n\n한번 삭제한 자료는 복구할 수 없습니다\n\n답변글이 있는 게시글을 선택하신 경우\n답변글도 선택하셔야 게시글이 삭제됩니다."))
return false;
f.removeAttribute("target");
f.action = "./board_list_update.php";
}
return true;
}
// 선택한 게시물 복사 및 이동
function select_copy(sw) {
var f = document.fboardlist;
if (sw == "copy")
str = "복사";
else
str = "이동";
var sub_win = window.open("", "move", "left=50, top=50, width=500, height=550, scrollbars=1");
f.sw.value = sw;
f.target = "move";
f.action = "./move.php";
f.submit();
}
</script>
<!--{/}-->
답변 3
<td class="td-name hidden-xs" style="width:80px;text-align:left;">
넓이가 좀 크다 싶으면 width 값을 조절해보세요.
대박. .감사합니다
<td class="td-name hidden-xs">
을 아래와 같이 해보세요.
<td class="td-name hidden-xs" style="text-align:center">
앗 감사합니다!!! 근데 혹시 이게 지금 이대로라면 이름이 4글자인 사람이 끼게되면 계급이미지가 튀어나올것같은데.. (계급이미지+이름이 가운데 정렬이라서) 혹시 계급이미지는 계급이미지대로 줄 세우고, 닉네임은 닉네임대로 줄세울 수 있나요? 닉네임은 왼쪽정렬루요!! 이거 새 댓글로 사진 올려드릴게요
새 댓글로 사진 올렸습니다!
답변을 작성하시기 전에 로그인 해주세요.
