왜 떠 다니는 추가합니까 : 왼쪽 내 CSS는 내 링크 unclickable하게?



Answers

수정 사항은 매우 단순하고 크로스 브라우저입니다.이 링크를 unclickable 링크에 추가하십시오.

#QuestionEditLink, #QuestionHistoryLink {
    position: relative;
    z-index: 10;
}

여기의 수정은 z-index 이지만 position 가 상대 / 절대 / 고정이 아닌 경우에는 작동하지 않습니다.

z-index 에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/z-index를 참조 하십시오.

이 모든 것을 사용 해왔고, 간단하며, 모든 브라우저 (IE6 +, FF, Chrome, Safari, Opera)에서 작동합니다.

다른 사람들이 당신의 CSS 문제에 관해 이미 말했기 때문에, 나는 그것에 추가하지 않을 것입니다. 그런데 솔루션을 제공하는 것만으로 제공된 JSBin으로 테스트 해 보았습니다.

Question

다음과 같이 정의 된 섹션이있는보기가 있습니다.

<div id="QuestionBody">
        <p><%=ViewData.Model.Body %></p>
        <div id="QuestionEditLink"><%=Html.ActionLink ("Edit","EditQuestion","Question",new {id=Model.QuestionId},null) %></div>
        <div id="QuestionHistoryLink"><%=Html.ActionLink ("History","ShowHistory","Question",new {postId=Model.PostId,questionId=Model.QuestionId},null) %></div>  
        <div id="AnsweringUser"><a href="/Profile/Profile?userName=https%3A%2F%2Fwww.google.com%2Faccounts%2Fo8%2Fid%3Fid%3DAItOawnZ6IhK1C5cf_9wKstNNfSYIdnRp_zryW4">Answered by Sam</a></div>          
    </div>

이것은 텍스트와 몇 개의 링크가있는 섹션을 만듭니다. 나는 서로의 옆에있는 링크를 원했다. 저는 CSS와 웹 개발에 익숙하지 만 이것을 제 스타일 시트에 추가했습니다 :

#QuestionEditLink
{
    color: #666666;
    width:auto;
    float:left;
    padding:2px;
}

#QuestionHistoryLink
{
    color: #666666;
    width:auto;
    float:left;
    padding:2px;
}

링크가 멋지게 정렬되어 있습니다. 불행하게도 그들은 클릭 할 수 없으며 사실 커서는 그 위에 움직일 때 변경되지 않습니다.

그래서 내가 뭘 잘못 했니? 서로에게 두 개의 링크를 정렬하기 위해 CSS를 사용하여 클릭 할 수있는 방법은 무엇입니까?

편집하다:

이 동작은 크롬 8.0.552.215 및 Firefox 3.6입니다. 나는 IE 8에서 예상대로 작동한다.

EDIT2 :

나는이 문제를 보여주는 JSBin : http://jsbin.com/odefa4/edit에 페이지를 추가했다. 질문에만 스타일을 지정하고 문제를 보여 주며 답변에 대한 링크가 제대로 작동합니다 ...




ID가 클래스에 대한 작업 일 때 코드를 사용할 수 없습니다. 이것은 당신이 원하는 것을 할 것입니다 :

#AskingUser {
    border: none;
    float: right;
    width:auto;
    padding: 2px;
    position: relative;
    text-align: right;
}

추가

#QuestionBody {
    border-bottom: 1px dotted black;
    overflow: hidden;
}

ID로 남겨 뒀지 만 클래스가되도록 CSS와 HTML을 모두 조정해야합니다.

.askingUser {}<div class="askingUser"></div>

그 말이 맞는다면.




Related