Я пытаюсь поставить "X" в верхнем правом углу div, но любой текст, который сталкивается с ним, не будет завершен, потому что я использую абсолютное позиционирование на X.
<div class="article-listing" ng-animate="'animate'" ng-repeat="article in filtered = (wikiArticles | filter:search)">
<span class="article-title">{{article.title}}</span><a ng-click="articles.removeArticle($index)" class="delete-article" title="Remove article">✖</a>
<div class"article-extract">{{article.extract}}</div>
</div>
CSS:
.article-listing {
position: relative;
margin: 20px 0;
padding-left: 10px;
border-left: 1px solid #AAA;
}
span.article-title {
display: inline-block;
color: #666;
margin: 0 0 5px 0;
}
.article-extract {
margin: 0;
padding: 0;
}
.delete-article {
display: block;
position: absolute;
top: 0px;
right: 0px;
text-align: center;
font-style: normal;
background-color: #EEE;
color: #888;
width: 16px;
height: 16px;
cursor: pointer;
}
Как я могу получить его, если текст в заголовке или фрагменте попадает в X, он будет завершен?
.article-listing {
position: relative;
margin: 20px 0;
width: 500px;
padding-left: 10px;
}
.article-title {
display: inline-block;
float: left;
color: #666;
margin: 0 0 5px 0;
width: 94%;
}
.article-extract {
margin: 0;
padding: 0;
border: 1px solid #ddd;
}
.delete-article {
display: block;
float: right;
margin-left: 10px;
text-align: center;
font-style: normal;
background: #eee;
color: #888;
width: 16px;
height: 16px;
cursor: pointer;
}
Matt Gibson JSFiddle без заголовка float: left
: http://jsfiddle.net/6yN8j/6/
float
илиalign
.